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

.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: $color-gray-65;
    $dark-color: $color-gray-05;

    @include button-reset;
    align-items: center;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    padding: 3px 0;

    &[disabled] {
      visibility: hidden;
    }

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

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

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

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

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

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

  &__description {
    @include 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;
  }
}