@use 'sass:map';
@use './shared' as *;
@use './design' as *;

$result: () !default;
$result: map.merge(
  (
    title-font-size: 20px,
    icon-font-size: 54px,
    title-margin-top: 16px,
    description-font-size: 14px,
    description-margin-top: 4px,
    extra-margin-top: 24px
  ),
  $result
);

.#{$namespace}-result {
  &-vars {
    @include define-preset-values('result', $result);
  }

  @mixin define-result-style($style-map) {
    @include define-preset-style('result', $style-map);
  }

  @include basis {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  &--small {
    @include define-preset-values(
      'result',
      (
        icon-font-size: 36px,
        title-font-size: 16px,
        description-font-size: 12px
      )
    );
  }

  &--large {
    @include define-preset-values(
      'result',
      (
        icon-font-size: 84px,
        title-font-size: 28px,
        description-font-size: 16px
      )
    );
  }

  &__icon {
    display: flex;
    align-items: center;
    font-size: value('result-icon-font-size');
    color: value('result-icon-color');
  }

  &__title {
    margin-top: value('result-title-margin-top');
    font-size: value('result-title-font-size');
  }

  &__description {
    margin-top: value('result-description-margin-top');
    font-size: value('result-description-font-size');
  }

  &__extra {
    margin-top: value('result-extra-margin-top');
  }

  @each $type in $types {
    &--#{$type} {
      @include define-result-style(
        (
          bg-color: 'color' $type 'opacity-8',
          icon-color: 'color' $type 'dark-2'
        )
      );
    }
  }
}