@use "../globals/" as *;
@use "../util/" as *;

$border-radius-btn: 100vw;


.btn-content {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0;
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;

}

@mixin btn($bg-color: #e2e2e2) {
  display: inline-block;
  cursor: pointer;
  font-weight: $font-weight-400;
  white-space: nowrap;
  color: inherit;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  background-color: $bg-color;
  border: 1px solid transparent;
  padding: 0.3rem 1.35rem;
  font-size: $base-font-size;
  text-transform: uppercase;
  line-height: $base-font-size * 1.5;
  text-decoration: none;
  border-radius: $border-radius-btn;
  transition: $transition;
}

.btn {
  @include btn;
}

@each $key, $val in $theme-colors {
  .btn-#{$key} {
    // @include btn();
    background-color: $val;
    color: set-color($val);
    border: 1px solid transparent;
    &:hover {
      background-color: darken($val, 10);
    }
    &:focus-visible,
    &.focus {
      outline: 0;
      box-shadow: 0 0 0 0.15rem lighten($val, 20);
    }
    &:active,
    &.active {
      background-color: darken($val, 15);
    }    
  }

  .btn-link-#{$key} {
    // @include btn();
    background-color: transparent;
    color: $val;
    border: 1px solid transparent;
    &:hover {
      color: set-color($val);
      background-color: $val;
    }
    &:focus-visible,
    &.focus {
      outline: 0;
      box-shadow: 0 0 0 0.15rem lighten($val, 20);
    }
    &:active,
    &.active {
      background-color: darken($val, 15);
    }    
  }

  .btn-outline-#{$key} {
    // @include btn();
    color: darken($val, 10);
    background-color: transparent;
    border: 1px solid darken($val, 10);
    &:hover {
      color: darken($val, 30);
      border: 1px solid darken($val, 30);
    }
    &:focus-visible,
    &.focus {
      outline: 0;
      box-shadow: 0 0 0 0.15rem lighten($val, 20);
    }
    &:active,
    &.active {
      background-color: darken($val, 15);
      color: set-color($val);
    } 
  }
}

.btn.btn-sm {
  font-size: .75rem;
  line-height: $font-size-sm * 1.25;
  padding: 0.4rem 1rem;
  //border-radius: $base-border-radius;
}

.btn.btn-lg {
  font-size: $font-size-md;
  line-height: $font-size-md * 1.5;
  padding: 0.5rem 1.65rem;
  //border-radius: $base-border-radius * 2.5;
}

.btn.btn-block {
  font-size: $font-size-md;
  line-height: $font-size-md * 1.5;
  padding: 0.5rem 1.5rem;
  //border-radius: $base-border-radius * 2.5;
  display: block;
  width: 100%;
}



.btn-core {
  background-color: var(--bg-core-primary-lighten) !important;
  color: set-color (var(--bg-core-primary-lighten)) !important;
  //color: rgba(255,255,255,.85) !important;
  &:hover {
    background-color: var(--bg-core-primary) !important;
  }
  &:focus-visible,
  &.focus {
    outline: 0;
    box-shadow: 0 0 0 0.15rem var(--bg-core-primary-lighten);
  }
  &:active,
  &.active {
    background-color: var(--bg-core-primary-darken) !important;
  }
}

.btn-link-core {
  background-color: transparent !important;
  color: (var(--bg-core-primary-darken)) !important;
  &:hover {
    color: rgba(255,255,255,.85) !important;
    background-color: var(--bg-core-primary-darken) !important;
  }
  &:focus-visible,
  &.focus {
    outline: 0;
    box-shadow: 0 0 0 0.15rem var(--bg-core-primary-lighten);
  }
  &:active,
  &.active {
    color: rgba(255,255,255,.85) !important;
    background-color: var(--bg-core-primary-darken) !important;
  }
}


.btn-outline-core {
  color: var(--bg-core-primary-darken) !important;
  background-color: transparent !important;
  border: 1px solid var(--bg-core-primary-darken) !important;
  &:hover {
    color: var(--bg-core-primary-dark) !important;
    border: 1px solid var(--bg-core-primary-dark) !important;
  }
  &:focus-visible,
  &.focus {
    outline: 0;
    box-shadow: 0 0 0 0.15rem var(--bg-core-primary-lighten);
  }
  &:active,
  &.active {
    background-color: var(--bg-core-primary-darken) !important;
    color: set-color (var(--bg-core-primary-darken)) !important;
  }
}








