@import '../variables';

:root {
  --itf-button-basic-bg-color: rgba(9, 30, 66, 0.08);
}

[data-theme="dark"] {
  --itf-button-basic-bg-color: rgba(246, 225, 189, 0.08);

  .itf-button.btn {
    &.btn-secondary {
      &, &.disabled {
        background-color: $dark-btn-secondary-color;
        border-color: $dark-btn-secondary-color;
      }

      &:active, &:focus {
        background-color: lighten($dark-btn-secondary-color, 5%);
        border-color: lighten($dark-btn-secondary-color, 5%);
      }
      &:hover {
        background-color: lighten($dark-btn-secondary-color, 10%);
        border-color: lighten($dark-btn-secondary-color, 10%);
      }
    }
    &.btn-primary {
      &, &.disabled {
        background-color: $dark-btn-primary-color;
        border-color: $dark-btn-primary-color;
        color: $body-color;
      }

      &:active, &:focus {
        color: $body-color;
        background-color: darken($dark-btn-primary-color, 5%);
        border-color: darken($dark-btn-primary-color, 5%);
        box-shadow: 0 0 0 0.125rem mix($dark-btn-primary-color, $dark-body-bg, 50%);
      }
      &:hover {
        color: $body-color;
        background-color: darken($dark-btn-primary-color, 10%);
        border-color: darken($dark-btn-primary-color, 10%);
      }
    }
  }
}

@supports (-webkit-mask-image:paint(id)) or (-webkit-mask-image:paint(id)) or (mask-image:paint(id)) or (-webkit-mask-image:paint(id)) {
  button.itf-button.btn.btn-squircle {
    -webkit-mask-image: paint(squircle);
    --squircle-smooth: 0.6;
    --squircle-radius: 10px;
    --squircle-outline: 0px;
    --squircle-corners: top-left top-right bottom-left bottom-right;
  }
  .itf-button.btn-squircle.btn:not(.dropdown-toggle):focus:after {
    -webkit-mask-image: paint(squircle);
    --squircle-smooth: 0.6;
    --squircle-radius: 10px;
    --squircle-outline: 3px;
    --squircle-corners: top-left top-right bottom-left bottom-right;
  }
}
.itf-button.btn {
  display: inline-flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  transition: background-color 0.16s linear 0s;

  &:focus {
    -webkit-mask-image: none!important;
  }
  &.btn-squircle:focus:after {
    border-color: rgb(103, 146, 244);
  }
  // &:not(.dropdown-toggle):focus:after {
  //   border: 3px solid #6792f4;
  //   border-radius: .5rem;
  //   content: '';
  //   position: absolute;
  //   top: -3px;
  //   left: -3px;
  //   right: -3px;
  //   bottom: -3px;
  //   outline: none;
  // }
  &.itf-button__block {
    display: block;
    width: 100%;
  }
  & > div {
    pointer-events: none;
  }
  .itf-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -0.75rem;
  }

  &.loading {
    cursor: progress;
    pointer-events: none;
    color: transparent;

    &.btn-sm .itf-spinner {
      width: 1rem;
      height: 1rem;
      margin: -0.5rem;
    }
    &.btn-lg .itf-spinner {
      width: 1.75rem;
      height: 1.75rem;
      margin: -0.875rem;
    }
  }
  &.btn-basic {
    &:hover, &.active {
      background-color: var(--itf-button-basic-bg-color);
    }
  }
  &.btn-icon {
    padding: 0.25rem;
    svg {
      width: 1.5rem;
      height: 1.5rem;
    }
    &.btn-sm {
      svg {
        width: 1.3125rem;
        height: 1.3125rem;
      }
    }
    &.btn-lg {
      svg {
        width: 1.875rem;
        height: 1.875rem;
      }
    }
  }

  &.btn-default {
    --bs-btn-color: #22222B;
    --bs-btn-border-color: #e5e5e5;
    --bs-btn-hover-color: #1A4A97;
    --bs-btn-hover-border-color: rgba(26, 74, 151, 0.3);
    --bs-btn-active-color: #1A4A97;
    --bs-btn-active-border-color: #1A4A97;
    --bs-btn-disabled-color: var(--bs-btn-color);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-btn-border-color);

    .itf-icon {
      color: #8E97A5;
    }

    &:hover {
      .itf-icon {
        color: var(--bs-btn-hover-color);
      }
    }
    &:active, &:focus {
      .itf-icon {
        color: var(--bs-btn-active-color);
      }
    }

    &.btn-white {
      --bs-btn-color: #ffffff;
      --bs-btn-bg: transparent;
      --bs-btn-border-color: rgba(255, 255, 255, 0.5);
      --bs-btn-hover-color: #22222b;
      --bs-btn-hover-bg: rgba(255, 255, 255, 0.5);
      --bs-btn-hover-border-color: rgba(255, 255, 255, 0.5);
      --bs-btn-active-color: #22222b;
      --bs-btn-active-bg: color-mix(in srgb, black 10%, var(--bs-btn-hover-bg));
      --bs-btn-active-border-color: rgba(255, 255, 255, 0.5);

      .itf-icon {
        color: var(--bs-btn-color);
      }

      &:hover {
        background-color: var(--bs-btn-hover-bg);
        border-color: var(--bs-btn-hover-border-color);

        .itf-icon {
          color: var(--bs-btn-hover-color);
        }
      }
      &:active, &:focus {
        background-color: var(--bs-btn-active-bg);
        border-color: var(--bs-btn-active-border-color);

        .itf-icon {
          color: var(--bs-btn-active-color);
        }
      }
    }
  }

  &.btn-secondary {
    --bs-btn-bg: #f5f6f8;
    --bs-btn-border-color: #f5f6f8;

    &:hover {
      background-color: color-mix(in srgb, black 10%, var(--bs-btn-bg));
      border-color: color-mix(in srgb, black 10%, var(--bs-btn-bg));
    }
    &:active, &:focus {
      background-color: color-mix(in srgb, black 20%, var(--bs-btn-bg));
      border-color: color-mix(in srgb, black 20%, var(--bs-btn-bg));
    }

    &.btn-secondary--light {
      --bs-btn-bg: #ffffff;
      --bs-btn-border-color: #ffffff;
    }
  }

  &.btn-primary {
    &:hover {
      background-color: color-mix(in srgb, white 10%, var(--bs-btn-bg));
      border-color: color-mix(in srgb, white 10%, var(--bs-btn-bg));
    }
    &:active, &:focus {
      background-color: color-mix(in srgb, white 20%, var(--bs-btn-bg));
      border-color: color-mix(in srgb, white 20%, var(--bs-btn-bg));
    }
  }

  &.btn-blue {
    --bs-btn-bg: #1A4A97;
    --bs-btn-border-color: #1A4A97;

    &:hover {
      background-color: color-mix(in srgb, black 10%, var(--bs-btn-bg));
      border-color: color-mix(in srgb, black 10%, var(--bs-btn-bg));
    }
    &:active, &:focus {
      background-color: color-mix(in srgb, black 20%, var(--bs-btn-bg));
      border-color: color-mix(in srgb, black 20%, var(--bs-btn-bg));
    }
  }

  &.btn-white {
    --bs-btn-bg: #ffffff;
    --bs-btn-border-color: #ffffff;

    &:hover {
      background-color: color-mix(in srgb, black 10%, var(--bs-btn-bg));
      border-color: color-mix(in srgb, black 10%, var(--bs-btn-bg));
    }
    &:active, &:focus {
      background-color: color-mix(in srgb, black 20%, var(--bs-btn-bg));
      border-color: color-mix(in srgb, black 20%, var(--bs-btn-bg));
    }
  }
}
