@import 'src/styles/colors';

:root .component {
  // primary regular
  --btn-primary-shadow: 0 8px 16px rgba(255, 67, 57, 0.16);
  --btn-primary-border: 0;
  --btn-primary-bg: #{$color-red500};
  --btn-primary-text: #fff;

  // primary hover
  --btn-primary-shadow-hover: 0 8px 16px rgba(255, 105, 97, 0.24);
  --btn-primary-border-hover: none;
  --btn-primary-bg-hover: #{$color-red400};
  --btn-primary-text-hover: #fff;

  // primary active
  --btn-primary-shadow-active: 0 4px 8px rgba(204, 54, 46, 0.16);
  --btn-primary-border-active: none;
  --btn-primary-bg-active: #{$color-red600};
  --btn-primary-text-active: #fff;

  // primary disabled
  --btn-primary-shadow-disabled: none;
  --btn-primary-border-disabled: none;
  --btn-primary-bg-disabled: #{$color-grey200};
  --btn-primary-text-disabled: #fff;

  // default regular
  --btn-default-shadow: none;
  --btn-default-border: 0;
  --btn-default-bg: rgba(255, 67, 57, 0.1);
  --btn-default-text: #{$color-red500};

  // default hover
  --btn-default-shadow-hover: none;
  --btn-default-border-hover: none;
  --btn-default-bg-hover: rgba(255, 105, 97, 0.1);
  --btn-default-text-hover: #{$color-red400};

  // default active
  --btn-default-shadow-active: none;
  --btn-default-border-active: none;
  --btn-default-bg-active: rgba(204, 54, 46, 0.08);
  --btn-default-text-active: #{$color-red600};

  // default disabled
  --btn-default-shadow-disabled: none;
  --btn-default-border-disabled: none;
  --btn-default-bg-disabled: rgba(170, 175, 179, 0.08);
  --btn-default-text-disabled: #{$color-grey300};

  // ghost regular
  --btn-ghost-shadow: none;
  --btn-ghost-border: 1px solid #{$color-red500};
  --btn-ghost-bg: transparent;
  --btn-ghost-text: #{$color-red500};

  // ghost hover
  --btn-ghost-shadow-hover: none;
  --btn-ghost-border-hover: 1px solid #{$color-red300};
  --btn-ghost-bg-hover: rgba(255, 105, 97, 0.1);
  --btn-ghost-text-hover: #{$color-red400};

  // ghost active
  --btn-ghost-shadow-active: none;
  --btn-ghost-border-active: 1px solid #{$color-red600};
  --btn-ghost-bg-active: rgba(204, 54, 46, 0.04);
  --btn-ghost-text-active: #{$color-red600};

  // ghost disabled
  --btn-ghost-shadow-disabled: none;
  --btn-ghost-border-disabled: 1px solid #{$color-grey100};
  --btn-ghost-bg-disabled: rgba(170, 175, 179, 0.08);
  --btn-ghost-text-disabled: #{$color-grey300};

  // link
  --btn-link-text: #{$color-blue500};
  --btn-link-text-hover: #{$color-blue400};
  --btn-link-text-active: #{$color-blue600};

  // light
  --btn-light-text: #{$color-red500};
  --btn-light-text-hover: #{$color-red400};
  --btn-light-text-active: #{$color-red600};

  // select
  --btn-select-shadow: none;
  --btn-select-shadow-hover: 0 16px 32px rgba(255, 67, 57, 0.04);
  --btn-select-shadow-active: 0 16px 32px rgba(255, 67, 57, 0.04);
  --btn-select-border: 1px solid #e3e4e6;
  --btn-select-border-hover: 1px solid #ff4339;
  --btn-select-border-active: 1px solid #ff4339;
  --btn-select-bg: #fff;
}

[data-theme='dark'] .component {
  // primary disabled
  --btn-primary-bg-disabled: #43484d;
  --btn-primary-text-disabled: #939496;

  // default disabled
  --btn-default-bg-disabled: rgba(147, 148, 150, 0.08);
  --btn-default-text-disabled: #939496;

  // ghost disabled
  --btn-ghost-border-disabled: 1px solid #43484d;
  --btn-ghost-bg-disabled: rgba(147, 148, 150, 0.08);
  --btn-ghost-text-disabled: #939496;

  // link
  --btn-link-text: #{$color-blue400};
  --btn-link-text-hover: #{$color-blue300};
  --btn-link-text-active: #{$color-blue500};

  // select
  --btn-select-border: 1px solid #43484d;
  --btn-select-border-hover: 1px solid #ff4339;
  --btn-select-border-active: 1px solid #ff4339;
  --btn-select-bg: #202529;
}

.component:global(.ant-btn) {
  font: var(--font-p2);
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 12px;
  height: 48px;
  padding: 12px 32px;
  border-radius: 4px;
  text-align: center;

  &:global(.ant-btn-lg) {
    font: var(--font-p1);
    font-weight: bold;
    height: 64px;
    padding: 20px;
  }

  &:global(.ant-btn-sm) {
    font: var(--font-sm);
    font-weight: bold;
    height: 34px;
    padding: 9px;
  }

  &:global(.ant-btn-primary) {
    box-shadow: var(--btn-primary-shadow);
    border: var(--btn-primary-border);
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);

    &:hover {
      box-shadow: var(--btn-primary-shadow-hover);
      border: var(--btn-primary-border-hover);
      background: var(--btn-primary-bg-hover);
      color: var(--btn-primary-text-hover);
    }

    &:active {
      box-shadow: var(--btn-primary-shadow-active);
      border: var(--btn-primary-border-active);
      background: var(--btn-primary-bg-active);
      color: var(--btn-primary-text-active);
    }

    &:disabled,
    &:disabled:hover {
      box-shadow: var(--btn-primary-shadow-disabled);
      border: var(--btn-primary-border-disabled);
      background: var(--btn-primary-bg-disabled);
      color: var(--btn-primary-text-disabled);
    }
  }

  &:global(.ant-btn-default) {
    box-shadow: var(--btn-default-shadow);
    border: var(--btn-default-border);
    background: var(--btn-default-bg);
    color: var(--btn-default-text);

    &:hover {
      box-shadow: var(--btn-default-shadow-hover);
      border: var(--btn-default-border-hover);
      background: var(--btn-default-bg-hover);
      color: var(--btn-default-text-hover);
    }

    &:active {
      box-shadow: var(--btn-default-shadow-active);
      border: var(--btn-default-border-active);
      background: var(--btn-default-bg-active);
      color: var(--btn-default-text-active);
    }

    &:disabled,
    &:disabled:hover {
      box-shadow: var(--btn-default-shadow-disabled);
      border: var(--btn-default-border-disabled);
      background: var(--btn-default-bg-disabled);
      color: var(--btn-default-text-disabled);
    }
  }

  &:global(.ant-btn-ghost) {
    box-shadow: var(--btn-ghost-shadow);
    border: var(--btn-ghost-border);
    background: var(--btn-ghost-bg);
    color: var(--btn-ghost-text);

    &:hover {
      box-shadow: var(--btn-ghost-shadow-hover);
      border: var(--btn-ghost-border-hover);
      background: var(--btn-ghost-bg-hover);
      color: var(--btn-ghost-text-hover);
    }

    &:active {
      box-shadow: var(--btn-ghost-shadow-active);
      border: var(--btn-ghost-border-active);
      background: var(--btn-ghost-bg-active);
      color: var(--btn-ghost-text-active);
    }

    &:disabled,
    &:disabled:hover {
      box-shadow: var(--btn-ghost-shadow-disabled);
      border: var(--btn-ghost-border-disabled);
      background: var(--btn-ghost-bg-disabled);
      color: var(--btn-ghost-text-disabled);
    }

    &.select {
      height: auto;
      box-shadow: var(--btn-select-shadow);
      border: var(--btn-select-border);
      background: var(--btn-select-bg);

      &:hover {
        box-shadow: var(--btn-select-shadow-hover);
        border: var(--btn-select-border-hover);
      }

      &:active {
        box-shadow: var(--btn-select-shadow-active);
        border: var(--btn-select-border-active);
      }
    }
  }

  &:global(.ant-btn-link) {
    height: auto;
    padding: 0;
    border: 0;
    color: var(--btn-link-text);

    &:hover {
      color: var(--btn-link-text-hover);
    }

    &:active {
      color: var(--btn-link-text-active);
    }

    &.light {
      color: var(--btn-light-text);

      &:hover {
        color: var(--btn-light-text-hover);
      }

      &:active {
        color: var(--btn-light-text-active);
      }
    }
  }
}
