/**
  Template (fill): fill styles
 */
@function text-color($color) {
  @return var(--#{$color}-#{get("font.color.value")});
  // @return saturate(color(#{$color}-900), 2%);
}

%fill {
  border-color: transparent;
  border-width: size(1px);
  border-style: solid;
  outline: none;

  @if (get("useLogoUI")) {
    @each $color, $value in get("color.logo-ui") {
      &-#{"" + $color} {
        background-color: var(--#{$color});
        // color: if($color == basic or $color==light or $color == secondary or $color == gray, mix-darkener($color), var(--white));
        color: if($color == basic or $color == light or $color == secondary or $color == gray, text-color($color), var(--white));

        @each $state in get("state.list") {
          &:#{$state}, &-#{$state} {
            background-color: var(--#{$color}-#{$state});
            // border-color: if($color == light, var(--light), var(--#{$color}-#{$state}));
          }
        }
      }
    }
  } @else {
    @each $color, $value in get("color.list") {
      &-#{"" + $color} {
        background-color: var(--#{$color});
        // color: if($color == basic or $color==light or $color == secondary or $color == gray, mix-darkener($color), var(--white));
        color: if($color == basic or $color == light or $color == secondary or $color == gray, text-color($color), var(--white));

        @each $state in get("state.list") {
          &:#{$state}, &-#{$state} {
            background-color: var(--#{$color}-#{$state});
            // border-color: if($color == light, var(--light), var(--#{$color}-#{$state}));
          }
        }
      }
    }
  }

  &:active, &:focus {
    @include nb-outline();
  }
}

/**
  Template (outline): outline styles
 */
%outline {
  background-color: transparent;
  border-style: solid;
  border-width: size(1px);

  @each $color, $value in get("color.list") {
    &-#{"" + $color} {
      background-color: transparent;
      border-color: var(--#{$color});
      // color: if($color == secondary or $color == basic, mix-darkener($color), var(--#{$color}));
      @if not ($color == basic or $color == secondary or $color == gray) {
        color: var(--#{$color});
      }

      @each $state in get("state.list") {
        &:#{$state}, &-#{$state} {
          border-color: if($color==light, var(--light), var(--#{$color}-#{$state}));
          background-color: rgba(var(--#{$color}-#{$state}-rgb), var(--ghost-#{$state}));

          @if get("bootstrap.status") {
            color: if($color == secondary or $color == basic or $color == gray, text-color($color), var(--#{$color}));
          }
        }
      }
    }
  }
}

/**
  Template (ghost): ghost styles
 */
%ghost {
  // TODO: bu iki defa görüntülenmeye neden oluyor. Color değerinden zaten geliyor. Buradan kaldırılabilir gibi duruyor.
  // Eğer Vaadin vs. de sorun çıkarmıyorsa border ve background-color buralardan kaldırılsın.
  // border: size(1px) solid transparent;
  background-color: transparent;
  border-color: transparent;

  @each $color, $value in get("color.list") {
    &-#{"" + $color} {
      background-color: transparent;
      border-color: transparent;
      // color: if($color == secondary or $color == basic, mix-darkener($color), var(--#{$color}));
      @if not ($color == secondary or $color == basic or $color == gray) {
        color: var(--#{$color});
      }

      @each $state in get("state.list") {
        &:#{$state}, &-#{$state} {
          background-color: rgba(var(--#{$color}-#{$state}-rgb), var(--ghost-#{$state}));
        }
      }
    }
  }
}

%extender-color {
  @each $type in get("type") {
    @each $color, $value in get("color.list") {
      $selector: if($type==fill, "&.#{$color}", "&.#{$type}.#{$color}");
      #{$selector}, &-#{$type}-#{"" + $color} {
        @extend %#{$type} !optional;
        @extend %#{$type}-#{"" + $color};
      }
    }
  }
}
