// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only

.ConversationDetails {
  &-header {
    &__root {
      align-items: center;
      display: flex;
      flex-direction: column;
      margin-block: 0 20px;
      margin-inline: 0;
      padding-block: 0;
      padding-inline: 24px;
      text-align: center;
      width: 100%;
    }

    &__root--editable {
      @include button-reset();
    }

    &__root--editable {
      cursor: pointer;
    }

    &__title {
      @include font-title-1;
      align-items: center;
      display: flex;
      justify-content: center;
      padding-bottom: 8px;
      padding-top: 12px;
    }

    &__subtitle {
      @include font-body-1;
      color: $color-gray-60;
      justify-content: center;
      padding-bottom: 6px;

      @include dark-theme {
        color: $color-gray-25;
      }
    }

    &__root--editable &__title {
      $icon: '../images/icons/v3/edit/edit.svg';

      &::after {
        $size: 24px;

        content: '';
        height: $size;
        inset-inline-start: $size + 13px;
        margin-inline-start: -$size;
        opacity: 0;
        position: relative;
        transition: opacity 100ms ease-out;
        width: $size;

        @include light-theme {
          @include color-svg($icon, $color-gray-60);
        }
        @include dark-theme {
          @include color-svg($icon, $color-gray-25);
        }
      }
    }

    &__root--editable:hover &__title::after {
      opacity: 1;
    }
  }

  &__chat-color {
    @include color-bubble(20px);
  }

  &-membership-list,
  &-groups {
    &__add-members-icon,
    &__add-to-group-icon {
      @mixin plus-icon($color) {
        @include color-svg('../images/icons/v3/plus/plus-compact.svg', $color);
        content: '';
        display: block;
        height: 18px;
        width: 18px;
      }

      align-items: center;
      border-radius: 100%;
      display: flex;
      height: 32px;
      justify-content: center;
      width: 32px;

      @include light-theme {
        background: $color-gray-02;
        &::before {
          @include plus-icon($color-black);
        }
      }
      @include dark-theme {
        background: $color-gray-90;
        &::before {
          @include plus-icon($color-gray-15);
        }
      }
    }
  }

  &__block-group {
    color: $color-accent-red;
  }
  &__unblock-group {
    color: $color-accent-blue;
  }

  &__tabs {
    &#{&} {
      border-bottom: none;
    }
  }

  &__pending--info {
    @include font-subtitle;
    @include light-theme {
      color: $color-gray-60;
    }
    @include dark-theme {
      color: $color-gray-25;
    }
    padding-block: 0;
    padding-inline: 28px;
    padding-top: 16px;
  }

  &-icon {
    &__button {
      background: none;
      border: none;
      padding: none;

      &:focus {
        outline: none;

        .ConversationDetails-icon__icon::after {
          @include keyboard-mode {
            background-color: $color-ultramarine;
          }
        }
      }
    }

    &__icon {
      height: 32px;
      width: 32px;
      display: flex;
      align-items: center;
      justify-content: center;

      &::after {
        display: block;
        content: '';
        width: 20px;
        height: 20px;
      }

      @mixin details-icon(
        $url,
        $light-color: $color-gray-75,
        $dark-color: $color-gray-15
      ) {
        @include light-theme {
          @include color-svg($url, $light-color);
        }

        @include dark-theme {
          @include color-svg($url, $dark-color);
        }
      }

      &--color {
        &::after {
          @include details-icon('../images/icons/v3/color/color.svg');
        }
      }

      &--timer {
        &::after {
          @include details-icon('../images/icons/v3/timer/timer-slash.svg');
        }
      }

      &--notifications {
        &::after {
          @include details-icon('../images/icons/v3/bell/bell.svg');
        }
      }

      &--mute {
        &::after {
          @include details-icon('../images/icons/v3/bell/bell-slash.svg');
        }
      }

      &--mention {
        &::after {
          @include details-icon('../images/icons/v3/at/at.svg');
        }
      }

      &--lock {
        &::after {
          @include details-icon('../images/icons/v3/key/key.svg');
        }
      }

      &--approve {
        &::after {
          @include details-icon('../images/icons/v3/check/check.svg');
        }
      }

      &--link {
        &::after {
          @include details-icon('../images/icons/v3/link/link.svg');
        }
      }

      &--share {
        &::after {
          @include details-icon('../images/icons/v3/copy/copy.svg');
        }
      }

      &--reset {
        &::after {
          @include details-icon('../images/icons/v3/refresh/refresh.svg');
        }
      }

      &--trash {
        &::after {
          @include details-icon('../images/icons/v3/trash/trash.svg');
        }
      }

      &--invites {
        &::after {
          @include details-icon('../images/icons/v3/group/group.svg');
        }
      }

      &--edit {
        &::after {
          @include details-icon('../images/icons/v3/edit/edit.svg');
        }
      }

      &--down {
        border-radius: 18px;
        @include light-theme {
          background-color: $color-gray-02;
        }

        @include dark-theme {
          background-color: $color-gray-90;
        }

        &::after {
          width: 18px;
          height: 18px;
          @include details-icon(
            '../images/icons/v3/chevron/chevron-down-compact.svg'
          );
        }
      }

      &--leave {
        &::after {
          @include details-icon('../images/icons/v3/leave/leave.svg');
        }
      }

      &--block {
        &::after {
          @include details-icon(
            '../images/icons/v3/block/block.svg',
            $color-accent-red,
            $color-accent-red
          );
        }
      }
      &--unblock {
        &::after {
          @include details-icon(
            '../images/icons/v3/block/block.svg',
            $color-accent-blue,
            $color-accent-blue
          );
        }
      }

      &--verify {
        &::after {
          @include details-icon(
            '../images/icons/v3/safety_number/safety_number.svg'
          );
        }
      }
    }
  }

  &-media-list {
    &__root {
      display: flex;
      justify-content: center;
      padding-block: 0;
      padding-inline: 20px;
      padding-bottom: 24px;

      .module-media-grid-item {
        border-radius: 4px;
        height: auto;
        margin-block: 0;
        margin-inline: 4px;
        max-height: 94px;
        overflow: hidden;
        width: calc(100% / 6);

        .module-media-grid-item__icon {
          &::before {
            content: '';
            display: block;
            padding-top: 100%;
          }
        }

        .module-media-grid-item__image-container,
        img {
          margin: 0;
        }
      }
    }

    &__show-all {
      background: none;
      border: none;
      padding: 0;

      @include light-theme {
        color: $color-gray-95;
      }
      @include dark-theme {
        color: $color-gray-05;
      }
    }
  }

  &-panel-row {
    $row-root-selector: '#{&}__root';
    &__root {
      align-items: center;
      border-radius: 5px;
      border: 2px solid transparent;
      display: flex;
      padding-block: 8px;
      padding-inline: 24px;
      user-select: none;
      width: 100%;

      &--button {
        color: inherit;
        background: none;

        &:hover:not(:disabled) {
          @include light-theme {
            background-color: $color-gray-02;
          }

          @include dark-theme {
            background-color: $color-gray-90;
          }

          & .ConversationDetails-panel-row__actions {
            opacity: 1;
          }
        }
      }

      &:focus {
        outline: none;
      }

      @mixin keyboard-focus-state($color) {
        &:focus {
          border-color: $color;
        }
      }

      @include keyboard-mode {
        @include keyboard-focus-state($color-ultramarine);
      }
      @include dark-keyboard-mode {
        @include keyboard-focus-state($color-ultramarine-light);
      }
    }

    &__icon {
      margin-inline-end: 12px;
      flex-shrink: 0;
    }

    &__label {
      flex-grow: 1;
      text-align: start;
      margin-inline-end: 12px;
    }

    &__info {
      @include font-body-2;
      margin-top: 4px;

      @include light-theme {
        color: $color-gray-60;
      }

      @include dark-theme {
        color: $color-gray-25;
      }
    }

    &__right {
      position: relative;
      color: $color-gray-45;
      min-width: 143px;
    }

    &__actions {
      margin-inline-start: 12px;
      overflow: hidden;
      opacity: 0;

      #{$row-root-selector}:hover &,
      #{$row-root-selector}:focus-within & {
        opacity: 1;
      }
    }
  }

  &-panel-section {
    &__root {
      position: relative;

      &:not(:first-child)::before {
        border-top: 1px solid transparent;

        @include light-theme {
          border-top-color: $color-gray-15;
        }

        @include dark-theme {
          border-top-color: $color-gray-65;
        }

        content: '';
        display: block;
        margin-block: 8px;
        margin-inline: 0;
      }

      &--borderless {
        &:not(:first-child)::before {
          border-top: none;
        }
      }
    }

    &__header {
      display: flex;
      justify-content: space-between;
      padding-block: 18px 12px;
      padding-inline: 24px;

      &--center {
        justify-content: center;
      }
    }

    &__title {
      @include font-body-1-bold;
    }
  }

  &__header-buttons {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;

    .module-Button {
      margin-block: 0;
      margin-inline: 8px;
    }
  }

  &__radio {
    &__container {
      padding-block: 12px;
      padding-inline: 0;
    }
  }
}