/* @vertical-section-title */
.vertical-section-title {
  display: none;

  @media (min-width: $large-screen) {
    position: absolute;
    display: block;
    height: 32px;
    top: 2px;
    width: 1170px;
    transform: translateX(-50%);
    left: 50%;

    &--inner {
      position: absolute;
      transform: translateX(100%) rotate(90deg);
      transform-origin: center left;
      right: 1em;
      top: -1em;

      p {
        padding-left: 100px;
        position: relative;
        text-transform: uppercase;
        letter-spacing: 3px;
        color: $red-ribbon;
        font-size: $small-font;

        &::before {
          content: '';
          width: 80px;
          height: 2px;
          display: block;
          position: absolute;
          top: 50%;
          left: 0;
          margin-top: -1px;
          background-image: linear-gradient(to right, #6d0222, $red-ribbon 60%);
          box-shadow: $red-ribbon 1px 1px 7px;
        }

        .has-dark-background & {
          &::before {
            box-shadow: none !important;
          }
        }

        @include themify($themes) {
          color: themed('subtitleColor');

          &::before {
            background-image: linear-gradient(to right, darken(themed('subtitleColor'), 5%), themed('subtitleColor') 60%);
            box-shadow: themed('subtitleColor') 1px 1px 7px;
          }
        }

        .has-dark-background & {
          @include themify($themes) {
            // color: themed('subtitleColorOnDark');
            color: $white;

            &::before {
              // background-image: linear-gradient(to right, darken(themed('subtitleColorOnDark'), 5%), themed('subtitleColorOnDark') 60%);
              background-image: none;
              background-color: $white;
              box-shadow: none;
            }
          }
        }
      }
    }
  }
}