@use '../../color/index.scss' as *;
@use 'sass:color';

/* 按钮类型 */
@mixin VerBtnType($type, $color6) {
  .ver-btn-#{$type} {
    color: $ver-zinc-1;
    background-color: $color6;

    &:not(.is-disabled):hover {
      background-color: color.adjust($color6, $lightness: 10%);
    }

    .dark & {
      color: $ver-zinc-1;
      background-color: $color6;
    }
  }
}

/* 灵魂按钮 */
@mixin VerBtnGhost($type, $color5, $color6) {
  .ver-btn-#{$type}.is-ghost {
    color: $color6;
    border: 1.5px solid $color5;

    &:not(.is-disabled):hover {
      background-color: $color6;
      border-color: $color6;
    }

    .dark & {
      border-color: $color5;
      background-color: $ver-zinc-2;

      &:not(.is-disabled):hover {
        background-color: $color6;
        color: $ver-zinc-1;
      }
    }
  }
}

/* plain属性 */
@mixin VerBtnPlain($type, $color1, $color6) {
  .ver-btn-#{$type}.is-plain {
    color: $color6;
    border: 1px solid $color6;
    background-color: $color1;

    &:not(.is-disabled):hover {
      background-color: $color1;
      color: $color6;
    }

    .dark & {
      background-color: $ver-zinc-2;

      &:not(.is-disabled):hover {
        border-color: $color6;
        color: $color6;
      }
    }
  }
}

/* text属性 */
@mixin VerBtnText($type, $color1, $color6) {
  .ver-btn-#{$type}.is-text {
    border: none;
    color: $color6;
    background-color: transparent;

    &:not(.is-disabled):hover {
      background-color: $color1;
    }

    .dark & {
      color: $color6;
      background-color: transparent;

      &:not(.is-disabled):hover {
        color: color.adjust($color6, $lightness: -10%);
      }
    }
  }
}
