@import "../../styles/color";
@import "../../styles/flex";
@import '../../styles/sizes';

@mixin setFrameSettings($bg, $icon) {
  background-color: $bg;
  .fill {
    fill: $icon;
  }
  .stroke {
    stroke: $icon;
  }
}

@mixin setColor($color){
  .fill {
    fill: $color;
  }
  .stroke {
    stroke: $color;
  }
}

.one-ui-icon {
    $root: &;
    @include flex();
    @include setMargin();
    @include setMarginHorizontal();
    @include setRadius();

    transition: all .3s ease;

    &--frame {
        @mixin svgSize($size) {
            svg {
                width: $size;
                height: $size;
            }
        }

        &-default {
          @include svgSize(50%);

          box-shadow: 0 12px 16px -6px rgba(105, 73, 190, 0.32), inset 0px 16px 40px rgba(255, 255, 255, 0.6);
          backdrop-filter: blur(32px);
          &#{$root}--color {
            &-white {
              @include setFrameSettings(color(dark), color(white));
            }
            &-dark {
              @include setFrameSettings(color(white, 1, 0.1), color(dark));
            }
            &-dark-5 {
              @include setFrameSettings(color(dark,5), color(white));
            }
            &-grey {
              @include setFrameSettings(color(grey, 5), color(white));
            }
            &-green {
              @include setFrameSettings(color(green), color(white));
            }
            &-red {
              @include setFrameSettings(color(red), color(white));
            }
            &-key {
              @include setFrameSettings(color(key), color(white));
            }
          }
        }
        &-none {
            @include svgSize(100%);
            &#{$root}--color {
                &-white {
                    @include setColor(color(white));
                }
                &-dark {
                    @include setColor(color(dark));
                }
                &-dark-5 {
                    @include setColor(color(dark,5));
                }
                &-grey {
                    @include setColor(color(grey, 5));
                }
                &-green {
                    @include setColor(color(green));
                }
                &-red {
                    @include setColor(color(red));
                }
                &-key {
                    @include setColor(color(key));
                }
            }
        }
        &-solid {
            @include svgSize(50%);

            &#{$root}--color {
                &-white {
                    @include setFrameSettings(color(white), color(dark));
                }
                &-dark {
                    @include setFrameSettings(color(dark), color(white));
                }
                &-dark-5 {
                    @include setFrameSettings(color(dark,5), color(white));
                }
                &-grey {
                    @include setFrameSettings(color(grey, 5), color(white));
                }
                &-green {
                    @include setFrameSettings(color(green), color(white));
                }
                &-red {
                    @include setFrameSettings(color(red), color(white));
                }
                &-key {
                    @include setFrameSettings(color(key), color(white));
                }
            }
        }

        &-opacity {
            @include svgSize(50%);

            &#{$root}--color {
                &-white {
                    @include setFrameSettings(color(white, 1, 0.1), color(white));
                }
                &-dark {
                    @include setFrameSettings(color(dark, 1, 0.1), color(dark));
                }
                &-dark-5 {
                    @include setFrameSettings(color(dark, 5, 0.1), color(dark,5));
                }
                &-grey {
                    @include setFrameSettings(color(grey,2,.5), color(grey, 5));
                }
                &-green {
                    @include setFrameSettings(color(green, 1, 0.2), color(green));
                }
                &-red {
                    @include setFrameSettings(color(red, 1, 0.1), color(red));
                }
                &-key {
                    @include setFrameSettings(color(key, 1, 0.1), color(key));
                }
            }
        }
    }

    &--solid {
        .fill {
            opacity: 1;
        }
        .stroke {
            opacity: 1;
        }
    }
}