@import "common/foundation/mixins";
.full-page-chat {
  overflow: hidden; //prevents double scroll
  .channels-list {
    overflow-y: overlay;
    padding-bottom: 6rem;
    box-sizing: border-box;
    background-color: var(--primary-very-low);

    .direct-message-channels {
      .chat-channel-title {
        padding: 0.6rem 0; //minor adjustment for visual consistency with channels which dont have avatars
      }
    }

    @media (hover: none) {
      .chat-channel-row:hover {
        background: transparent;
      }

      .chat-channel-row:active {
        background: var(--primary-low);
      }
    }

    .chat-channel-row {
      margin: 0 1.5rem;
      padding: 0;
      border-radius: 0;

      &:not(:last-child) {
        border-bottom: 1px solid var(--primary-low);
      }
    }

    .chat-channel-divider {
      background-color: var(--secondary);
      margin-top: 4rem;
      padding: 1rem 1.5rem;
      font-size: var(--font-up-1);

      &:first-of-type {
        margin-top: 0;
        padding-bottom: 0.5rem; //visual compensation
      }

      .channel-title {
        color: var(--quaternary);
        font-size: var(--font-down-1);
      }
    }

    .channels-list-container {
      background: var(--secondary);
    }

    .chat-user-avatar {
      img {
        width: calc(var(--chat-mobile-avatar-size) - 2px);
        height: calc(var(--chat-mobile-avatar-size) - 2px);
      }

      + .chat-channel-title__usernames {
        margin-left: 1rem;
      }
    }

    .chat-channel-title {
      padding: 1rem 0;
      width: 100%;
      overflow: hidden;

      &__users-count {
        width: var(--chat-mobile-avatar-size);
        height: var(--chat-mobile-avatar-size);
        padding: 0;
        font-size: var(--font-up-2);
        justify-content: center;

        & + .chat-channel-title__name {
          margin-left: 1rem;
        }
      }

      &__name {
        font-size: var(--font-up-1);
      }

      &__category-badge {
        font-size: var(--font-up-1);
      }
    }
  }

  .btn-floating.new-dm {
    position: absolute;
    background: var(--tertiary);
    bottom: 2.5rem;
    right: 2.5rem;
    border-radius: 50%;
    font-size: var(--font-up-4);
    padding: 1rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    z-index: z("usercard");
    box-shadow: 0px 5px 5px -1px rgba(0, 0, 0, 0.25);

    .d-icon {
      color: var(--primary-very-low);
    }

    &:active {
      box-shadow: 0px 0px 5px -1px rgba(0, 0, 0, 0.25);
      transform: scale(0.9);
    }

    &:focus {
      @include default-focus;
      border-color: var(--quaternary);
      outline-color: var(--quaternary);
    }
  }
}