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

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

@mixin preferences-icon($url) {
  &::before {
    @include mixins.light-theme {
      @include mixins.color-svg($url, variables.$color-gray-75);
    }
    @include mixins.dark-theme {
      @include mixins.color-svg($url, variables.$color-gray-15);
    }
  }
}

.Preferences {
  display: flex;
  overflow: hidden;
  user-select: none;
  @include mixins.light-theme {
    background: variables.$color-white;
  }
  @include mixins.dark-theme {
    background: variables.$color-gray-95;
  }

  &__page-selector {
    padding-top: calc(24px + var(--title-bar-drag-area-height));
    min-width: min(34%, 240px);
    @include mixins.light-theme {
      background: variables.$color-gray-02;
    }
    @include mixins.dark-theme {
      background: variables.$color-gray-80;
    }
  }

  &__padding {
    padding-block: 0;
    padding-inline: 24px;
  }

  legend {
    font-weight: 600;
  }

  &__button {
    @include mixins.button-reset;
    & {
      @include mixins.font-body-1;
      align-items: center;
      display: flex;
      height: 48px;
      width: 100%;
      padding-block: 14px;
      padding-inline: 0;
    }

    &--selected {
      @include mixins.light-theme {
        background: variables.$color-gray-15;
      }
      @include mixins.dark-theme {
        background: variables.$color-gray-65;
      }
    }

    &:focus {
      @include mixins.keyboard-mode {
        background: variables.$color-gray-05;
      }
      @include mixins.dark-keyboard-mode {
        background: variables.$color-gray-75;
      }
    }

    &::before {
      content: '';
      display: block;
      height: 22px;
      margin-inline: 18px 14px;
      width: 22px;
    }

    &--general {
      @include preferences-icon('../images/icons/v3/settings/settings.svg');
    }

    &--appearance {
      @include preferences-icon('../images/icons/v3/appearance/appearance.svg');
    }

    &--chats {
      @include preferences-icon('../images/icons/v3/chat/chat.svg');
    }

    &--calls {
      @include preferences-icon('../images/icons/v3/phone/phone.svg');
    }

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

    &--privacy {
      @include preferences-icon('../images/icons/v3/lock/lock.svg');
    }
  }

  &__settings-pane {
    height: 100vh;
    overflow: overlay;
    width: 100%;

    &::-webkit-scrollbar-corner {
      background: transparent;
    }
  }

  &__title {
    @include mixins.font-body-1-bold;
    align-items: center;
    display: flex;
    height: 48px;
    margin-top: var(--title-bar-drag-area-height);
    margin-bottom: 24px;
    text-align: center;

    border-bottom: 1px solid variables.$color-gray-15;
    @include mixins.light-theme {
      border-color: variables.$color-gray-15;
    }
    @include mixins.dark-theme {
      border-color: variables.$color-gray-65;
    }

    &--header {
      flex-grow: 1;
      text-align: center;
    }
  }

  &__settings-row {
    border: none;
    padding: 0;

    padding-bottom: 20px;

    h3 {
      @include mixins.font-body-1-bold;
      margin: 0;
      margin-bottom: 8px;
    }

    &--pnp-sharing {
      min-height: 185px;
    }
  }

  &__settings-row:not(:last-child) {
    border-bottom: 1px solid variables.$color-gray-15;
    @include mixins.light-theme {
      border-color: variables.$color-gray-15;
    }
    @include mixins.dark-theme {
      border-color: variables.$color-gray-65;
    }
    & {
      margin-bottom: 24px;
    }
  }

  &__pnp {
    padding-inline: 0;
    width: 100%;

    h3 {
      @include mixins.font-body-1;
      font-weight: 400;
      margin: 0;
    }
  }

  &__control {
    align-items: center;
    display: flex;
    justify-content: space-between;
    min-height: 48px;
    padding-block: 4px;
    padding-inline: 24px;

    &--icon {
      width: 20px;
      height: 20px;
      flex-shrink: 0;
      margin-inline-end: 12px;
    }

    &--key {
      flex-grow: 1;
      padding-inline-end: 20px;
    }

    &--value {
      color: variables.$color-gray-45;
      flex-shrink: 0;
    }

    &--clickable {
      @include mixins.button-reset;
      & {
        padding-block: 4px;
        padding-inline: 24px;
        width: 100%;
      }
      &:hover {
        @include mixins.light-theme {
          background: variables.$color-gray-02;
        }
        @include mixins.dark-theme {
          background: variables.$color-gray-80;
        }
      }
    }
  }

  &__checkbox {
    padding-block: 10px;
    padding-inline: 24px;
  }

  &__description {
    @include mixins.font-subtitle;
    @include mixins.light-theme {
      color: variables.$color-gray-60;
    }
    @include mixins.dark-theme {
      color: variables.$color-gray-25;
    }

    &--error {
      color: variables.$color-accent-red !important;
    }
  }

  &__select {
    width: 100%;
  }

  &__select-title {
    display: block;
    margin-bottom: 8px;
  }

  &__right-button {
    display: flex;
    justify-content: flex-end;
    min-width: 120px;
  }

  &__back-icon {
    @include mixins.button-reset;

    & {
      display: inline-block;
      height: 20px;
      margin-inline-start: 12px;
      min-width: 20px;
      vertical-align: text-bottom;
      width: 20px;
    }

    @include mixins.light-theme {
      @include mixins.color-svg(
        '../images/icons/v3/chevron/chevron-left.svg',
        variables.$color-gray-90
      );
    }
    @include mixins.dark-theme {
      @include mixins.color-svg(
        '../images/icons/v3/chevron/chevron-left.svg',
        variables.$color-gray-02
      );
    }
  }

  &__stories-off {
    min-width: 140px;
  }

  &__settings-radio__label {
    display: flex;
    flex-direction: row;
    gap: 16px;
    height: 40px;
    align-items: center;
    &:last-child {
      margin-bottom: 8px;
    }

    &--readonly {
      opacity: 0.4;
    }
  }
}

.Preferences__LanguageIcon {
  @include mixins.light-theme {
    @include mixins.color-svg(
      '../images/icons/v3/globe/globe.svg',
      variables.$color-gray-75
    );
  }
  @include mixins.dark-theme {
    @include mixins.color-svg(
      '../images/icons/v3/globe/globe.svg',
      variables.$color-gray-15
    );
  }
}

.Preferences__LanguageButton {
  @include mixins.button-reset;
  @include mixins.localized-fonts;
}

.Preferences__LanguageModal {
  height: 560px;
  .module-Modal__body {
    flex-grow: 1;
  }
}

.Preferences__LanguageModal__Title {
  @include mixins.font-body-1-bold;
  margin-inline: 8px;
}

.Preferences__LanguageModal__NoResults {
  @include mixins.font-body-1;
  margin: 16px;
  text-align: center;
}

.Preferences__LanguageModal__Item {
  @include mixins.button-reset;
  & {
    width: 100%;
    padding-block: 2px;
    padding-inline: 8px;
  }
  &:hover {
    .Preferences__LanguageModal__Item__Inner {
      @include mixins.light-theme {
        background-color: variables.$color-black-alpha-06;
      }
      @include mixins.dark-theme {
        background-color: variables.$color-white-alpha-06;
      }
    }
  }
  &:focus {
    outline: none;
    .Preferences__LanguageModal__Item__Inner {
      @include mixins.keyboard-mode {
        background-color: variables.$color-black-alpha-06;
        box-shadow: 0 0 0 2px variables.$color-ultramarine;
      }
      @include mixins.dark-keyboard-mode {
        background-color: variables.$color-white-alpha-06;
      }
    }
  }
}

.Preferences__LanguageModal__Item__Inner {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding-block: 5px;
  padding-inline: 16px;
  border-radius: 8px;
}

.Preferences__LanguageModal__Item__Label {
  flex-grow: 1;
}

.Preferences__LanguageModal__Item__Current {
  display: block;
  @include mixins.font-body-1;
}

.Preferences__LanguageModal__Item__Check {
  display: flex;
  height: 20px;
  width: 20px;
  align-items: center;
  justify-content: center;
  background: variables.$color-ultramarine;
  @include mixins.rounded-corners;
  &::after {
    @include mixins.color-svg(
      '../images/icons/v3/check/check.svg',
      variables.$color-white
    );
    & {
      content: '';
      height: 14px;
      width: 14px;
    }
  }
}

.Preferences__LanguageModal__Item__Matching {
  display: block;
  @include mixins.localized-fonts;
  @include mixins.font-body-2;
  @include mixins.light-theme {
    color: variables.$color-gray-60;
  }
  @include mixins.dark-theme {
    color: variables.$color-gray-25;
  }
}