$size: 3rem;
$unit: $size / 16;
$panel-height: calc(100% - #{$sidebar-header-height});

.spinner {
  animation: spin $animation-speed-ui linear infinite;
  border: $unit solid $font-color-light;
  border-radius: 50%;
  display: block;
  height: $size;
  margin: 0 auto;
  position: relative;
  top: calc(50% - (#{$size} / 2));
  width: $size;

  &::before,
  &::after {
    background-color: $lpblue;
    border-radius: 50%;
    content: "";
    height: ($unit * 2);
    left: ($size / 2) - $unit;
    position: absolute;
    top: (-$unit * 1.5);
    width: ($unit * 2);
  }
}

.sidebar {
  background-color: $color-white;
  bottom: 0;
  height: 100vh;
  overflow: visible;
  position: absolute;
  right: 0;
  top: 0;
  width: $sidebar-width;

  .no-content {
    padding: $gutter;
  }

  &__header {
    background-color: $lpblue;
    height: $sidebar-header-height;
    padding: 1.9rem $gutter .5rem;

    .details {
      a {
        color: $color-white;
      }
    }

    .sidebar__title {
      color: $color-white;
      font-size: 4rem;
      font-weight: bold;
      letter-spacing: -.2px;
      line-height: 1;
      margin-top: .8rem;

      &.__continent {
        margin-top: 3.5rem;
      }
    }

    .location-subtitle {
      color: #92b5d6;
      display: inline-block;
      font-size: 2.2rem;
      letter-spacing: -1.5px;
      line-height: 1;
      transition: color $animation-speed;

      &:hover,
      &:active,
      &:focus {
        color: #cbdaea;
      }

      .icon {
        font-size: 1.25rem;
        padding-right: .5rem;
        position: relative;
        top: -.2rem;
      }
    }
  }

  &__tabs {
    border-top: .1rem solid rgba($color-white, .2);
    line-height: 1;
    list-style: none;
    margin-top: 2.6rem;

    .tab {
      color: $color-white;
      cursor: pointer;
      display: inline-block;
      font-size: 1.4rem;
      font-weight: bold;
      letter-spacing: -.03rem;
      padding-bottom: 1.7rem;
      padding-top: 1.7rem;
      position: relative;
      text-align: center;

      + .tab {
        margin-left: $gutter;
      }

      &__sub-nav {
        $top: 4.3rem;
        $left: -#{$gutter + 2rem};
        $width: 28rem;
        $margin-left: 0;
        $padding-top: ($gutter * 1.5) - 1.3rem;
        @include dropdown-menu($top, $left, $width, $margin-left, $padding-top);
        padding-bottom: ($gutter - 1.3rem);
        padding-left: ($gutter + .8rem);
        padding-right: $gutter;

        &::before {
          $size: 1.2rem;
          $left: 5.8rem;
          @include dropdown-menu-arrow($size, $left);
        }

        &.is-visible {
          @include dropdown-menu-visible;
        }
      }

      &__sub-nav__list {
        list-style: none;
        text-align: left;

        &--item {
          color: $darkgray;
          font-size: 1.4rem;
          line-height: 1;
          padding-bottom: 1.3rem;
          padding-top: 1.3rem;
          position: relative;
          text-transform: capitalize;
          transition: color $animation-speed;

          &:hover,
          &:active,
          &:focus {
            color: $lpblue;
          }

          &.is-selected {
            color: $lpblue;

            &::before {
              background-color: $lpblue;
              border-radius: 100%;
              content: "";
              height: .6rem;
              left: -2.1rem;
              margin-top: .3rem;
              position: absolute;
              width: .6rem;
            }
          }
        }
      }

      &::after {
        $height: .4rem;
        background: $color-white;
        bottom: 0;
        content: "";
        display: block;
        height: $height;
        left: 0;
        position: absolute;
        transform: translate(0, $height);
        transition: transform ($animation-speed / 2) linear;
        width: 100%;
      }

      &:hover,
      &:active,
      &:focus,
      &.active, {
        &::after {
          transform: translate(0, 0);
        }
      }

      .tab__icon {
        float: right;
        height: .8rem;
        margin-left: 1rem;
        margin-top: .2rem;
        position: relative;
        width: .8rem;

        // covers up the border
        &::after {
          background-color: $lpblue;
          bottom: -2.1rem;
          content: "";
          height: .4rem;
          position: absolute;
          right: -.2rem;
          width: 2rem;
          z-index: z("default");
        }
      }
    }
  }

  .panel {
    height: $panel-height;
    overflow: auto;

    .listing {
      border-top: .1rem solid $color-gray;
      margin: $gutter auto;
      position: relative;
      width: (($sidebar-width - ($gutter * 2)) / $sidebar-width) * 100%;
    }

    &__header {
      color: $darkgray;
      font-size: 3rem;
      font-weight: 300;
      line-height: 1.2;
      padding: ($gutter + .7rem) $gutter 0;
    }

    &__content {
      font-size: 1.5rem;
      padding: ($gutter - .5rem) 5rem ($gutter * 2) $gutter;

      h2 {
        color: rgba($color-text, .7);
        font-size: 2rem;

        + p {
          margin-top: .7rem;
        }
      }

      p {
        color: rgba($color-text, .7);
        font-size: 1.6rem;
        line-height: (22 / 16);
        margin: $gutter 0;
      }

      .copy--feature {
        margin-top: 0;
      }

      ul {
        font-size: 1.8rem;
        line-height: (24 / 18);
        margin-left: 1rem;
      }
    }

    &__footer {
      bottom: 0;
      box-shadow: 0 0 6rem 0 rgba($color-black, .08);
      position: absolute;
      top: auto;
      width: $sidebar-width;
    }

    &__close {
      @include button("inverse");
      border-radius: 0;
      display: block;
      padding-bottom: 2.3rem;
      padding-top: 2.5rem;
    }
  }

  .slideshow__progress__dot {
    height: .7rem;
    width: .7rem;
  }
}