@use 'sass:map';
@use 'sass:meta';
@use 'sass:list';
@use 'sass:string';
@use '../../abstract';

// 8px 단위
$sizes: (
  'sm': (
    32px,
    6px,
  ),
  'md': (
    40px,
    8px,
  ),
  'lg': (
    48px,
    10px,
  ),
  'xl': (
    56px,
    12px,
  ),
);

$themes: (
  'modern': (
    'bg': var(--base-white),
    'color': var(--base-black),
  ),
  'dark-square': (
    'bg': var(--secondary-gray-blue-700),
    'color': var(--base-white),
  ),
  'mid-square': (
    'bg': var(--secondary-gray-blue-500),
    'color': var(--base-white),
  ),
  'light-square': (
    'bg': var(--secondary-gray-blue-100),
    'color': var(--secondary-gray-blue-500),
  ),
  'light-circle': (
    'bg': var(--gray-100),
    'color': var(--gray-500),
  ),
  'outline-square': (
    'bg': var(--base-white),
    'color': var(--gray-700),
  ),
  'dark-circle': (
    'bg': var(--gray-400),
    'color': var(--base-white),
  ),
);

$feature-colors: (
  'neutral': (
    'bg': var(--gray-100),
    'color': var(--gray-500),
  ),
  'info': (
    'bg': var(--blue-100),
    'color': var(--blue-500),
  ),
  'error': (
    'bg': var(--primary-red-100),
    'color': var(--primary-red-500),
  ),
  'warning': (
    'bg': var(--orange-100),
    'color': var(--orange-500),
  ),
  'success': (
    'bg': var(--green-100),
    'color': var(--green-500),
  ),
  'primary': map.get($themes, 'light-square'),
);

$feature-color-dark: (
  'success': var(--green-400),
  'error': var(--primary-red-400),
  'warning': var(--orange-400),
  'neutral': var(--gray-400),
);

$map: (
  'size': $sizes,
  'theme': $themes,
  'color': $feature-colors,
);

@mixin feature-ico-theme($type) {
  $this: &;
  @each $name, $info in map.get($map, $type) {
    &--#{$name} {
      // size
      @if meta.type-of($info) == list {
        width: nth($info, 1);
        height: nth($info, 1);
        border-radius: nth($info, 2);
      }

      // theme, color
      @if meta.type-of($info) == map {
        border: 1px solid map.get($info, 'bg');
        background-color: map.get($info, 'bg');
        color: map.get($info, 'color');
      }

      @if $type == 'color' {
        $color: map.get($info, 'color');

        &#{$this}--outline-circle {
          background-color: transparent;
          border: none;

          #{$this}__svg-wrap {
            &::before,
            &::after {
              content: '';
              position: absolute;
              border-radius: 50%;
              border: 2px solid $color;
            }
            &::before {
              width: calc(100% + 10px);
              height: calc(100% + 10px);
              opacity: 0.3;
            }
            &::after {
              width: calc(100% + 20px);
              height: calc(100% + 20px);
              opacity: 0.1;
            }
          }
        }
      }
    }
  } // colors
}

.cds-feature-icon {
  $this: &;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  @include feature-ico-theme('size');
  @include feature-ico-theme('theme');
  @include feature-ico-theme('color');

  &--modern {
    box-shadow: var(--shadow-xs);
    border-color: var(--gray-200);
  }

  &--outline-square {
    border-color: var(--gray-100);
  }

  &.is-circle {
    border-radius: 50%;
  }

  @each $color-name, $bg-color in $feature-color-dark {
    &--#{$color-name}.is-dark {
      background-color: $bg-color;
      color: #fff;
      border-color: $bg-color;
    }
  }
  &__svg-wrap {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
  }
}