TelegramPWA/src/components/right/Profile.scss

@use '../../styles/mixins';

.Profile {
  scrollbar-gutter: stable;

  overflow-x: hidden;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;

  height: 100%;

  > .profile-info > .ChatInfo {
    grid-area: chat_info;

    .status.online {
      color: var(--color-primary);
    }
  }

  > .profile-info > .ChatExtra {
    padding: 0.875rem 0.5rem 0.5rem;

    @include mixins.adapt-padding-to-scrollbar(0.5rem);
    @include mixins.side-panel-section;
    @include mixins.with-vt-type('rightColumn');

    .narrow {
      margin-bottom: 0;
    }

    [dir="rtl"] {
      .Switcher {
        margin-right: auto;
        margin-left: 0;
      }
    }
  }

  .hidden {
    display: none;
  }

  .FloatingActionButton {
    z-index: 1;

    &.revealed {
      transition-delay: 0.2s;
    }
  }
}

.nothing-found-gifts {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding-top: 5rem;

  .description {
    unicode-bidi: plaintext;

    margin-block: 1rem;

    font-size: 1rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    text-align: center;
  }

  .Link {
    font-weight: var(--font-weight-medium);
    color: var(--color-links);
    transition: opacity 0.15s ease-in;

    &:active,
    &:hover {
      text-decoration: none;
      opacity: 0.85;
    }
  }
}

.shared-media {
  display: flex;
  flex: 1;
  flex-direction: column-reverse;

  @include mixins.with-vt-type('rightColumn');

  .SquareTabList {
    z-index: 1;
    background: var(--color-background);
  }

  .info .Transition {
    flex-grow: 0;
  }

  .Transition {
    flex: 1;
  }

  .saved-dialogs {
    height: 100% !important;
  }

  .shared-media-transition {
    overflow: hidden;
  }

  .content {
    transition: transform var(--layer-transition);
    &.showContentPanel {
      transform: translateY(3rem);
      padding-bottom: 3.5rem !important;
    }
    &.noTransition {
      transition: none;
    }

    &.empty-list {
      display: flex;
      align-items: flex-start;
      justify-content: center;

      height: 100%;
      padding-top: 5rem;

      .Spinner {
        --spinner-size: 2.75rem;
      }
    }

    &.storiesArchive-list,
    &.stories-list,
    &.media-list,
    &.gif-list,
    &.previewMedia-list,
    &.gifts-list {
      display: grid;
      grid-auto-rows: 1fr;
      grid-template-columns: repeat(3, 1fr);
      gap: 0.0625rem;
    }

    &.gifts-list {
      gap: 0.625rem;
    }

    &.documents-list {
      padding: 1.25rem;

      & .File + .File {
        margin-top: 1.25rem;
      }
    }

    &.links-list {
      padding: 1.25rem;

      .ProgressSpinner,
      .message-transfer-progress {
        display: none;
      }
    }

    &.audio-list,
    &.voice-list {
      padding: 1.25rem;

      & .Audio {
        .media-loading {
          top: 0;
          left: 0;

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

        & + .Audio {
          margin-top: 1.6875rem;
        }
      }
    }

    &.similarChannels-list,
    &.similarBots-list,
    &.commonChats-list,
    &.members-list,
    &.gifts-list {
      padding: 0.5rem;

      @include mixins.adapt-padding-to-scrollbar(0.5rem);

      @media (max-width: 600px) {
        padding: 0.5rem 0;
      }
    }

    &.similarBots-list,
    &.similarChannels-list {
      .ListItem.blured {
        filter: opacity(0.8);
      }

      .show-more-bots,
      .show-more-channels {
        z-index: 1;

        width: calc(100% - 1rem);
        margin: 0 auto;
        margin-top: -1.8125rem;
        border-radius: var(--border-radius-default-small);

        box-shadow: -1rem 0 1rem 1rem var(--color-background), -1rem 0 1rem 0.3125rem var(--color-background);
      }

      .more-similar {
        margin-top: 1rem;
        font-size: 0.8125rem;
        text-align: center;
      }
    }
  }

  .contentCategoriesPanel {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;

    transition: transform var(--layer-transition), opacity 0.2s ease;

    &.hiddenPanel {
      transform: translateY(-100%);
      opacity: 0;
    }

    &.noTransition {
      transition: none;
    }
  }

  .saved-gift {
    @include mixins.with-vt-type('profileGifts');
  }
}