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

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

.BadgeDialog {
  @mixin fixed-height($height) {
    height: $height;
    overflow-y: auto;
  }

  user-select: none;

  &__width-container {
    max-width: 420px;
  }

  &__contents {
    display: flex;
    align-items: center;
  }

  &__nav {
    $light-color: variables.$color-gray-65;
    $dark-color: variables.$color-gray-05;

    @include mixins.button-reset;
    & {
      align-items: center;
      border-radius: 4px;
      display: flex;
      justify-content: center;
      padding-block: 3px;
      padding-inline: 0;
    }

    &[disabled] {
      visibility: hidden;
    }

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

    @include mixins.light-theme {
      &:hover,
      &:focus {
        background: variables.$color-gray-02;
      }
      &:active {
        background: variables.$color-gray-05;
      }
    }
    @include mixins.dark-theme {
      &:hover,
      &:focus {
        background: variables.$color-gray-80;
      }
      &:active {
        background: variables.$color-gray-75;
      }
    }

    &--previous::before {
      @include mixins.light-theme {
        @include mixins.color-svg(
          '../images/icons/v3/chevron/chevron-left.svg',
          $light-color
        );
      }
      @include mixins.dark-theme {
        @include mixins.color-svg(
          '../images/icons/v3/chevron/chevron-left.svg',
          $dark-color
        );
      }
    }

    &--next::before {
      @include mixins.light-theme {
        @include mixins.color-svg(
          '../images/icons/v3/chevron/chevron-right.svg',
          $light-color
        );
      }
      @include mixins.dark-theme {
        @include mixins.color-svg(
          '../images/icons/v3/chevron/chevron-right.svg',
          $dark-color
        );
      }
    }
  }

  &__main {
    flex-grow: 1;
    text-align: center;
    padding-block: 24px;
    padding-inline: 10px;
  }

  &__name {
    @include mixins.font-title-2;
    @include fixed-height(3.5em);
    align-items: center;
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
    margin-top: 12px;
  }

  &__description {
    @include mixins.font-body-1;
    @include fixed-height(5.5em);
    margin-bottom: 12px;
  }

  &__instructions-button {
    width: 100%;

    // We use this selector for specificity.
    &.module-Button {
      font-size: 17px;
    }

    &--hidden {
      visibility: hidden;
    }
  }

  .BadgeCarouselIndex {
    margin-top: 24px;
  }
}
