sparkletown/sparkle

@import "scss/constants";

$header-height: 45px;
$chat-button-narrow-width: 50px;
$unread-dot-right-spacing-right: 28px;
$unread-dot-right-spacing-bottom: 22px;
// NOTE: mobile factor used is same as iPad 1, 2, Mini and Air at both portrait and landscape orientation
$media-width--mobile-min: 768px;
$media-width--mobile-max: 1024px;

.chat-sidebar {
  transform: translateX(100%);
  transition: transform 0.2s;
  position: fixed;
  display: flex;
  flex-flow: column;
  top: $navbar-height;
  right: 0;
  width: $chat-sidebar-width;
  height: calc(100vh - #{$reserved-page-height});
  background-color: $secondary--dark;
  z-index: z(sidebar);

  &--expanded {
    transform: translateX(0);
    transition: transform 0.3s;
    background-color: rgba($secondary--dark, 0.9);
    box-shadow: -10px 0 40px opaque-black(0.5);

    & .chat-sidebar__controller {
      width: $chat-button-narrow-width;
    }
  }

  &__header {
    height: $header-height;
  }

  &__tabs {
    height: 100%;
    display: flex;
    justify-content: space-between;
    width: 100%;
    background-color: $content--under;
  }

  &__tab {
    background: transparent;
    border: none;
    display: flex;
    flex: 1;
    font-size: 0.9rem;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: opaque-white(0.6);

    &:focus,
    &:hover {
      color: opaque-white(0.7);
    }

    &--selected {
      border-bottom: $content--over 2px solid;
      color: $content--over;

      &:focus,
      &:hover {
        color: $content--over;
        border-bottom: $content--over 2px solid;
      }
    }
  }

  &__controller {
    color: $content--over;
    background-color: $secondary;
    cursor: pointer;

    border: none;
    padding: 0 $spacing--sm;
    width: $chat-sidebar-controller-width;
    height: 55px;
    margin-top: $spacing--md;
    border-radius: $border-radius--lg 0 0 $border-radius--lg;

    display: flex;
    align-items: center;
    justify-content: center;

    position: absolute;
    top: 0;
    transform: translateX(-100%);

    &-text {
      font-size: $font-size--md;
    }

    &-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
    }

    &:hover {
      background-color: $lighter-intermediate-grey;
    }

    svg:nth-child(2) {
      margin-left: 2 * $spacing--xs;
      margin-right: -1 * $spacing--xs;
    }

    &--new-message {
      background-color: $primary--light;
      @include square-size($spacing--md + 1);
      border: 3px solid $secondary;
      position: absolute;
      border-radius: $border-radius--max;
      right: $unread-dot-right-spacing-right;
      bottom: $unread-dot-right-spacing-bottom;
    }
  }

  &__tab-content {
    flex: 1 1 auto;
    height: calc(100% - #{$header-height});
    width: 100%;
  }

  &__private-chat {
    margin-top: $spacing--xl * 3;
  }

  @media only screen and (min-width: $media-width--mobile-min) and (max-width: $media-width--mobile-max) {
    &--expanded {
      width: 100%;
    }

    &__tabs {
      padding-left: $header-height;
    }

    &--expanded &__controller {
      width: 100%;
      transform: translateX(0);
      border-radius: 0 $border-radius--lg $border-radius--lg 0;
    }

    &--collapsed &__controller {
      transform: translateX(-100%);
      border-radius: $border-radius--lg 0 0 $border-radius--lg;
    }
  }
}