@use "sass:color";
@use "variables" as vars;

$button-bg: #ddd;
$button-bg-light: color.adjust($button-bg, $lightness: 12%);
$hover-bg: color.adjust($button-bg, $lightness: 10%);
$hover-bg-light: color.adjust($button-bg, $lightness: 15%);
$border-color: color.adjust($button-bg, $lightness: -15%);
$icon-shadow: 1px 0 0 rgba(color.adjust($button-bg, $lightness: -35%), .5), 2px 0 0 rgba(255, 255, 255, .5);

.sb-classic-light, .sb-classic-dark {
  .sb-wrapper {
    --sb-icon-size: 1.1em;
    --sb-border-radius: .2em;

    &:active {
      --sb-box-shadow: 0 0 4px 2px rgba(0, 0, 0, .3) inset;
      position: relative;
      top: 1px;
    }

    .sb-icon {
      pointer-events: none;
      min-width: 2em;
    }
  }
}

.sb-classic-dark .sb-wrapper {
  --sb-color: #{vars.$sb-accent};
  --sb-background: var(--button-color);
  --sb-border: 1px solid rgba(0, 0, 0, .2);
  --sb-text-shadow: 0 1px 0 rgba(0, 0, 0, .2);
  --sb-box-shadow: 0 0 1px 2px rgba(255, 255, 255, .2) inset, 0 1px 0 rgba(0, 0, 0, .3);


  .sb-text {
    background: rgba(0, 0, 0, .1);
  }
}

.sb-classic-light .sb-wrapper {
  background-image: linear-gradient(to bottom, $button-bg-light, $button-bg);

  --sb-color: var(--button-color);
  --sb-background: #ddd;
  --sb-border: 1px solid #{$border-color};
  --sb-text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
  --sb-box-shadow: 0 0 1px 1px rgba(255, 255, 255, .8) inset, 0 1px 0 rgba(0, 0, 0, .3);

  &:hover {
    background-color: $hover-bg;
    background-image: linear-gradient(to bottom, $hover-bg-light, $hover-bg);
  }

  &.sb-show-text {
    .sb-icon {
      box-shadow: $icon-shadow;
    }
  }
}