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

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

.module-TimelineWarning {
  @mixin icon($icon) {
    @include mixins.light-theme {
      @include mixins.color-svg($icon, variables.$color-gray-60);
    }
    @include mixins.dark-theme {
      @include mixins.color-svg($icon, variables.$color-gray-20);
    }
  }

  align-items: center;
  display: flex;
  padding-block: 10px;
  padding-inline: 16px;
  min-height: 56px;
  user-select: none;

  border-top-width: 1px;
  border-top-style: solid;
  &:last-child {
    border-bottom-width: 1px;
    border-bottom-style: solid;
  }

  @include mixins.light-theme {
    color: variables.$color-gray-65;
    background: variables.$color-gray-02;
    border-color: variables.$color-gray-15;
  }

  @include mixins.dark-theme {
    color: variables.$color-gray-15;
    background: variables.$color-gray-80;
    border-color: variables.$color-gray-65;
  }

  &__generic-icon {
    @include icon('../images/icons/v3/info/info.svg');
    & {
      width: 20px;
      height: 20px;
    }
  }

  &__text {
    @include mixins.font-body-2;
    flex-grow: 1;
    margin-inline: 12px;

    &__link {
      @include mixins.button-reset;
      & {
        display: inline;
        font-weight: bold;
        text-decoration: none;
      }

      @include mixins.light-theme {
        color: variables.$color-ultramarine;
      }
      @include mixins.dark-theme {
        color: variables.$color-ios-blue-tint;
      }
    }
  }

  &__close-button {
    @include mixins.button-reset;

    &::after {
      @include icon('../images/icons/v3/x/x.svg');
      & {
        content: '';
        display: block;
        height: 20px;
        width: 20px;
      }
    }
  }

  &__custom-info {
    flex-shrink: 0;
  }
}