@use '/src/styles/typography';
@use '/src/styles/mixins';

.button {
  position: relative;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  outline: none;
  transition: filter 250ms;
  width: inherit;

  &[disabled] {
    @include mixins.disabled();
  }

  &_shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--cl-border-radius);
    background: hsl(0deg 0% 0% / 0.25);
    will-change: transform;
    transform: translateY(2px);
    transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
  }

  &_edge {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--cl-border-radius);
    background: var(--cl-accent-gradient);
  }

  &_front {
    @include typography.font-style(core, base);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--cl-s-gap);
    position: relative;
    padding: var(--cl-m-gap) var(--cl-l-gap);
    border-radius: var(--cl-border-radius);
    font-size: var(--cl-base-font-size);
    color: var(--cl-primary-background);
    background: var(--cl-accent-color);
    will-change: transform;
    transform: translateY(-4px);
    transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);

    svg {
      color: var(--cl-primary-background);
    }
  }

  &:hover {
    filter: brightness(110%);
  }

  &:hover &_front {
    transform: translateY(-6px);
    transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
  }

  &:active &_front {
    transform: translateY(-2px);
    transition: transform 34ms;
  }

  &:hover &_shadow {
    transform: translateY(4px);
    transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
  }

  &:active &_shadow {
    transform: translateY(1px);
    transition: transform 34ms;
  }

  &:focus-visible {
    outline: revert;
    outline: var(--cl-outline-border);
    outline-offset: 4px;
  }
}
