@import "../mp-variables";

@title-height: 24px;
@title-height-lg: 19px;
@title-height-md: 18px;
@title-height-sm: 15px;

@fontsize: @title-height + 5;
@fontsize-lg: @title-height-lg + 5;
@fontsize-md: @title-height-md + 5;
@fontsize-sm: @title-height-sm + 5;

@arrow-size: 17px;
@arrow-diff: 3px;

@toggles-height: @title-height + @arrow-size + 8;
@toggles-height-sm: @title-height-sm + @arrow-size + 8;

.mp-header {
  z-index: 2;

  .mp-type-message {
    position: absolute;
    text-align: center;
    top: -2.5em;
    left: 2em;
    right: 2em;

    .mp-type-details {
      font-style: italic;
      margin: 0 auto;
      background: @gray-lighter;
      padding: 2px 8px;
      font-size: 12px;

      .fa {
        margin-right: 5px;
      }

      &.info {
        background: @state-info-bg;
        color: @brand-primary;
      }

      &.error {
        background: @state-danger-bg;
        color: @brand-danger;
      }
    }

  }

  .browse-toggle.googlePhotos {
      display: none;
  }

  .mp-browse-toggles {
    display: flex;
    height: @toggles-height;
    text-align: center;
    flex: 0 0 auto;
    padding: 0 5px;

    .browse-toggle {
      min-width: 15%;
      color: @gray-darker;
      cursor: pointer;
      height: 100%;
      font-size: @fontsize;
      font-family: "Open Sans", sans-serif;
      font-weight: 400;
      flex: auto;
      padding: 0 10px;

      .provider-logo {
        height: @title-height;
        margin-top: 3px;
        width: 100%;
        background-repeat: no-repeat;
        background-position-x: center;
        background-position-y: center;
        background-size: auto 100%; // fill height
      }

      .longer-title.title-text,
      .longer-title .title-text {
        font-size: @title-height;
      }

      .inline-title {
        margin-top: -1px;
      }

      .inline-title .fa {
        margin-right: 10px;
        font-size: @fontsize - 2;
      }

      &.selected {
        position: relative;
        border-bottom: 7px solid @link-color;
      }
    }

    .vert-divider {
      float: left;
      border-left: 1px solid @gray-lighter;
      height: @fontsize;
    }


    @media (max-width: @screen-lg) {
      & {
        .browse-toggle {
          font-size: @fontsize-lg;

          .provider-logo {
            margin-top: 4px;
            height: @title-height-lg;
          }

          .longer-title.title-text,
          .longer-title .title-text {
            font-size: @fontsize-lg - 4;
          }

          .inline-title .fa {
            font-size: @fontsize-lg - 2;
          }
        }

        .vert-divider {
          height: @fontsize-lg;
        }
      }
    }

    @media (max-width: @screen-md) {
      & {
        .browse-toggle {
          font-size: @fontsize-md;
          padding: 0 8px;

          .provider-logo {
            margin-top: 5px;
            height: @title-height-md;
          }

          .longer-title.title-text,
          .longer-title .title-text {
            font-size: @fontsize-md - 4;
          }

          .inline-title .fa {
            margin-right: 8px;
            font-size: @fontsize-md - 2;
          }

        }
        .vert-divider {
          height: @fontsize-md;
        }
      }
    }

    @media (max-width: @screen-sm) {
      & {
        height: @toggles-height-sm;

        .browse-toggle {
          font-size: @fontsize-sm;

          .provider-logo {
            margin-top: 5px;
            height: @title-height-sm;
          }

          .longer-title.title-text,
          .longer-title .title-text {
            font-size: @fontsize-sm - 4;
          }

          .inline-title .fa {
            margin-right: 6px;
            font-size: @fontsize-sm - 2;
          }

          &.selected:before,
          &.selected:after {
              top: @toggles-height-sm - (2 * (@arrow-size - @arrow-diff));
            }

        }

        .vert-divider {
          height: @fontsize-sm;
        }

      }
    }
}

}
