@import "pack/seed-dash/_index";
@import "pack/seed-family/_index";
@import "pack/seed-this/_index";

.c-CloseButton {
  @import "../configs/color";
  @import "../resets/base";
  @import "../resets/button";

  $block: this();
  $padding: 2px 6px;
  $size: 32px;
  $sizes: (
    md: (
      size: $size,
      padding: $padding
    ),
    sm: (
      size: 28px,
      padding: 2px 3px
    ),
    xs: (
      size: 24px,
      padding: 2px 1px
    ),
    tiny: (
      size: 20px,
      padding: 0 0
    )
  );

  background-color: white;
  border: none;
  border-radius: 50%;
  color: _color(grey, 700);
  cursor: pointer;
  display: block;
  height: $size;
  padding: $padding;
  position: relative;
  transition: background-color 0.3s ease;
  width: $size;

  &:hover,
  &:focus {
    color: _color(grey, 800);
    outline: none;
  }
  &:active {
    color: _color(charcoal, 200);
    outline: none;
  }

  &__icon {
    opacity: 0.5;
    position: relative;
    transition: opacity 0.1s ease;
    z-index: 1;

    @include parent("#{$block}:hover") {
      opacity: 0.8;
    }
    @include parent("#{$block}:focus") {
      opacity: 0.8;
    }
  }

  // Modifiers
  &.is-seamless {
    background-color: transparent;
    color: currentColor;

    &:hover,
    &:active,
    &:focus {
      background-color: transparent;
      color: currentColor;
    }
  }

  // Sizes
  @each $size, $values in $sizes {
    &.is-#{$size} {
      $sz: _get($values, size);
      height: $sz;
      padding: _get($values, padding);
      width: $sz;
    }
  }
}