@use "@styles/abstracts/functions" as fun;

.btn {
  display: inline-flex;
  place-content: center;
  align-items: center;
  border: none;
  border-radius: fun.convert-px(5);
  font-size: var(--font-size-md);
  font-weight: 600;
  transition: all 0.3s ease-in-out 0s;

  &--rectangle {
    padding: var(--spacing-2xs) var(--spacing-md);
  }

  &--square,
  &--circle {
    padding: var(--spacing-xs);
    aspect-ratio: 1 / 1;
  }

  &--circle {
    border-radius: 50%;
  }

  &:disabled {
    cursor: wait;
  }

  &--primary {
    background: var(--color-primary);
    border: fun.convert-px(2) solid var(--color-bg);
    box-shadow: 0 0 0 fun.convert-px(2) var(--color-primary),
      0 0 0 fun.convert-px(3) var(--color-primary-darker),
      fun.convert-px(2) fun.convert-px(2) 0 fun.convert-px(3)
        var(--color-primary-dark);
    color: var(--color-fg-inverted);
    text-decoration: none;
    text-shadow: fun.convert-px(2) fun.convert-px(2) 0 var(--color-shadow);

    &:disabled {
      background: var(--color-primary-darker);
    }

    &:not(:disabled) {
      &:hover,
      &:focus {
        background: var(--color-primary-light);
        box-shadow: 0 0 0 fun.convert-px(2) var(--color-primary-light),
          0 0 0 fun.convert-px(3) var(--color-primary-darker),
          fun.convert-px(7) fun.convert-px(7) 0 fun.convert-px(2)
            var(--color-primary-dark);
        color: var(--color-fg-inverted);
        transform: translateX(#{fun.convert-px(-4)})
          translateY(#{fun.convert-px(-4)});
      }

      &:focus {
        text-decoration: underline solid var(--color-fg-inverted)
          fun.convert-px(2);
      }

      &:active {
        background: var(--color-primary-dark);
        box-shadow: 0 0 0 fun.convert-px(2) var(--color-primary),
          0 0 0 fun.convert-px(3) var(--color-primary-darker),
          0 0 0 0 var(--color-primary-dark);
        text-decoration: none;
        transform: translateX(#{fun.convert-px(4)})
          translateY(#{fun.convert-px(4)});
      }
    }
  }

  &--secondary {
    background: var(--color-bg);
    border: fun.convert-px(3) solid var(--color-primary);
    box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
        var(--color-shadow),
      fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2)
        var(--color-shadow),
      fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4)
        var(--color-shadow);
    color: var(--color-primary);
    text-decoration: underline transparent 0;

    &:disabled {
      border-color: var(--color-border-dark);
      color: var(--color-fg-light);
    }

    &:not(:disabled) {
      &:hover,
      &:focus {
        border-color: var(--color-primary-light);
        color: var(--color-primary-light);
        box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
            var(--color-shadow-light),
          fun.convert-px(1) fun.convert-px(2) fun.convert-px(2)
            fun.convert-px(-2) var(--color-shadow-light),
          fun.convert-px(3) fun.convert-px(4) fun.convert-px(5)
            fun.convert-px(-4) var(--color-shadow-light),
          fun.convert-px(7) fun.convert-px(10) fun.convert-px(12)
            fun.convert-px(-3) var(--color-shadow-light);
        transform: scale(1.1);
      }

      &:focus {
        text-decoration: underline var(--color-primary-light) fun.convert-px(3);
      }

      &:active {
        border-color: var(--color-primary-dark);
        box-shadow: 0 0 0 0 var(--color-shadow);
        color: var(--color-primary-dark);
        text-decoration: underline transparent 0;
        transform: scale(0.94);
      }
    }
  }

  &--tertiary {
    background: var(--color-bg);
    border: fun.convert-px(3) solid var(--color-primary);
    box-shadow: fun.convert-px(2) fun.convert-px(2) 0 0 var(--color-bg),
      fun.convert-px(3) fun.convert-px(3) 0 0 var(--color-primary-dark),
      fun.convert-px(5) fun.convert-px(5) 0 0 var(--color-bg),
      fun.convert-px(6) fun.convert-px(6) 0 0 var(--color-primary-dark);
    color: var(--color-primary);

    &:disabled {
      color: var(--color-fg-light);
      border-color: var(--color-border-dark);
      box-shadow: fun.convert-px(2) fun.convert-px(2) 0 0 var(--color-bg),
        fun.convert-px(3) fun.convert-px(3) 0 0 var(--color-primary-darker),
        fun.convert-px(5) fun.convert-px(5) 0 0 var(--color-bg),
        fun.convert-px(6) fun.convert-px(6) 0 0 var(--color-primary-darker);
    }

    &:not(:disabled) {
      &:hover,
      &:focus {
        border-color: var(--color-primary-light);
        box-shadow: fun.convert-px(2) fun.convert-px(3) 0 0 var(--color-bg),
          fun.convert-px(4) fun.convert-px(5) 0 0 var(--color-primary),
          fun.convert-px(6) fun.convert-px(8) 0 0 var(--color-bg),
          fun.convert-px(8) fun.convert-px(10) 0 0 var(--color-primary),
          fun.convert-px(10) fun.convert-px(12) fun.convert-px(1) 0
            var(--color-shadow-light),
          fun.convert-px(10) fun.convert-px(12) fun.convert-px(5)
            fun.convert-px(1) var(--color-shadow-light);
        color: var(--color-primary-light);
        transform: translateX(#{fun.convert-px(-3)})
          translateY(#{fun.convert-px(-5)});
      }

      &:focus {
        text-decoration: underline var(--color-primary) fun.convert-px(2);
      }

      &:active {
        box-shadow: 0 0 0 0 var(--color-shadow);
        text-decoration: none;
        transform: translateX(#{fun.convert-px(5)})
          translateY(#{fun.convert-px(6)});
      }
    }
  }
}