@use 'sass:math';
@use '../global/variables' as var;
@use '../mixins/font-size' as fontSize;

@mixin button-shape(
  $border-radius: 3px,
  $padding: (
    math.div(var.$acms-form-height-sp - var.$acms-btn-font-size - 2px, 2),
  )
  var.$acms-btn-padding-x,
  $font-size: var.$acms-btn-font-size,
  $font-size-desktop: var.$acms-btn-font-size-desktop
) {
  display: inline-block;
  padding: $padding;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  border-radius: $border-radius;
  transition:
    background-color 0.2s,
    border-color 0.2s;

  @include fontSize.font-size($font-size);
}

@mixin button-decoration(
  $bg-color: #f7f7f7,
  $active-bg-color: $bg-color,
  $hover-bg-color: $bg-color,
  $focus-bg-color: $bg-color,
  $border-radius: 3px,
  $border: 1px solid var.$acms-btn-border-color,
  $border-color: var.$acms-btn-border-color,
  $hover-border-color: var.$acms-btn-hover-border-color,
  $active-border-color: var.$acms-btn-active-border-color,
  $focus-border-color: var.$acms-btn-focus-border-color,
  $text-color: var.$acms-btn-text-default-color,
  $active-text-color: $text-color,
  $hover-text-color: $text-color,
  $focus-text-color: $text-color,
  $box-shadow: null,
  $active-box-shadow: $box-shadow,
  $hover-box-shadow: $box-shadow,
  $focus-box-shadow: var.$acms-btn-focus-box-shadow
) {
  & {
    color: $text-color;
    background-color: $bg-color;
    border: $border;
    transition: background-color 0.2s;
  }

  // 色
  &:link,
  &:hover,
  &:active,
  &:visited {
    color: $text-color;
  }

  &:hover {
    text-decoration: none;
    background-color: $hover-bg-color;
    border-color: $hover-border-color;
    box-shadow: $hover-box-shadow;
  }

  // active
  &:active,
  &-active {
    color: $text-color;
    text-decoration: none;
    background-color: $active-bg-color;
    border-color: $active-border-color;
    box-shadow: $active-box-shadow;
  }

  &:active[disabled],
  &-active[disabled] {
    filter: alpha(opacity=1);
    opacity: 1;
  }

  // focus
  &:focus {
    background-color: $focus-bg-color;
    border-color: $focus-border-color;
    outline: none;
    box-shadow: $focus-box-shadow;
  }
}

@mixin button-gradation($start-color: #f7f7f7, $end-color: #e1e1e1) {
  background-image: -webkit-gradient(linear, center top, center bottom, from($start-color), to($end-color));
  background-image: linear-gradient(top, $start-color, $end-color);

  // filter: unquote(
  //   (
  //     "progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$start-color}', endColorstr='#{$end-color}', GradientType=0)"
  //   )
  // );
}

// ログインボタン
//===============================

// 色
@mixin btn-color($start-color: #f7f7f7, $end-color: #e1e1e1, $base-color: $end-color, $color: #333333) {
  color: $color;
  background-color: $base-color;
}

// active
@mixin btn-color-active($background-color: #e1e1e1, $color: #333333, $inset-color: #b2b2b2) {
  color: $color;
  background-color: $background-color;
  box-shadow: inset 0 1px 2px $inset-color;
}
