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

@use '../mixins';
@use '../variables';

.ConversationDetails {
  &__chat-color {
    @include mixins.color-bubble(32px);
  }

  &-membership-list,
  &-groups {
    &__add-members-icon,
    &__add-to-group-icon {
      @mixin plus-icon($color) {
        @include mixins.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;

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

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

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

  &__pending--info {
    @include mixins.font-subtitle;
    color: light-dark(variables.$color-gray-60, variables.$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 mixins.keyboard-mode {
            background-color: variables.$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: variables.$color-gray-75,
        $dark-color: variables.$color-gray-15
      ) {
        @include mixins.color-svg($url, light-dark($light-color, $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');
        }
      }

      &--media {
        &::after {
          @include details-icon('../images/icons/v3/album/album-tilt.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');
        }
      }

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

      &--bell {
        &::after {
          @include details-icon('../images/icons/v3/bell/bell-compact.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');
        }
      }

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

      &--down {
        border-radius: 18px;
        background-color: light-dark(
          variables.$color-gray-02,
          variables.$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',
            variables.$color-accent-red,
            variables.$color-accent-red
          );
        }
      }
      &--unblock {
        &::after {
          @include details-icon(
            '../images/icons/v3/block/block.svg',
            variables.$color-accent-blue,
            variables.$color-accent-blue
          );
        }
      }

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

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

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

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

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

  &-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%;
      @include mixins.font-body-2;

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

        &:hover:not(:disabled) {
          background-color: light-dark(
            variables.$color-gray-02,
            variables.$color-gray-90
          );

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

      &:focus {
        outline: none;
      }

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

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

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

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

    &__info {
      margin-top: 4px;
      color: light-dark(variables.$color-gray-60, variables.$color-gray-25);
    }

    &__info .ConversationDetails__panel-row__group-link {
      @include mixins.button-reset();
      & {
        word-break: break-all;
      }
    }

    &__right {
      position: relative;
      color: variables.$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;
        border-top-color: light-dark(
          variables.$color-gray-15,
          variables.$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 mixins.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;
    }
  }
}

.ConversationDetails__MemberName {
  user-select: text;
}

.ConversationDetails__CallHistoryGroup__List {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ConversationDetails__CallHistoryGroup__Item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding-block: 10px;
  padding-inline: 24px;
}

.ConversationDetails__CallHistoryGroup__ItemIcon {
  display: block;
  width: 20px;
  height: 20px;
}

.ConversationDetails__CallHistoryGroup__ItemIcon--Audio {
  @include mixins.color-svg(
    '../images/icons/v3/phone/phone.svg',
    light-dark(variables.$color-black, variables.$color-gray-15)
  );
}

.ConversationDetails__CallHistoryGroup__ItemIcon--Video {
  @include mixins.color-svg(
    '../images/icons/v3/video/video.svg',
    light-dark(variables.$color-black, variables.$color-gray-15)
  );
}

.ConversationDetails__CallHistoryGroup__ItemIcon--Adhoc {
  @include mixins.color-svg(
    '../images/icons/v3/link/link.svg',
    light-dark(variables.$color-black, variables.$color-gray-15)
  );
}

.ConversationDetails__CallHistoryGroup__ItemLabel {
  flex: 1;
}

.ConversationDetails__CallHistoryGroup__ItemTimestamp {
  flex-shrink: 0;
}

.ConversationDetails--nickname-actions {
  @include mixins.button-reset;
  & {
    width: 32px;
    height: 32px;
  }
  &::before {
    display: inline-block;
    content: '';
    width: 20px;
    height: 20px;
    @include mixins.color-svg(
      '../images/icons/v3/chevron/chevron-down.svg',
      light-dark(variables.$color-black, variables.$color-white)
    );
  }
}

.ConversationDetails--nickname-actions-label {
  @include mixins.sr-only;
}

.ConversationDetails--nickname-actions--delete {
  width: 16px;
  height: 16px;
  @include mixins.color-svg(
    '../images/icons/v3/trash/trash.svg',
    light-dark(variables.$color-black, variables.$color-white)
  );
}
