/*
Component represents a button.
Use:
  <button class="top-button style-accent size-md"></button>
*/

@use '../mixins/styles.scss';
@use '../mixins/flex.scss';

.top-button.v2 {
  &::after,
  &::before {
    content: '';
    position: absolute;

    z-index: 5;

    transition: transform var(--transition), opacity 0.1s ease-in 0.05s;
  }
  &::after {
    width: 100%;
    height: 10px;

    left: 5px;
    bottom: 0;

    background: #0D0621;

    transform: translateY(100%) skewX(45deg);
  }
  &::before {
    width: 10px;
    height: 100%;

    right: 0;
    top: 5px;

    background: rgba(0, 0, 0, 0.25);

    transform: translateX(100%) skewY(45deg);
  }
  
  // Styles
  &.style-primary {
    &:hover, &:focus {
      background: var(--color-primary-hover);
    }
  }
  &.style-secondary {
    &:hover, &:focus {
      background: var(--color-secondary-hover);
    }
  }
  &.style-primary, &.style-secondary {
    transition: var(--transition);
    transition-property: background, transform;

    &:focus {
      transform: translate(5px, 5px);
      &::after {
        transition-delay: 0.15s;
        transform: translate(-5px, 0);
        opacity: 0;
      }
      &::before {
        transition-delay: 0.15s;
        transform: translate(0, -5px);
        opacity: 0;
      }
    }
  }
}
.top-button {
  padding: var(--unit-2) var(--unit-4);

  position: relative;

  cursor: pointer;

  text-align: center;

  @include flex.row;
  @include flex.centering;

  z-index: 10;

  // Sizes
  &.size-xs {
    padding: var(--unit-1) var(--unit-2);
    font-size: var(--font-size-2);
  }
  &.size-sm {
    padding: var(--unit-2) var(--unit-3);
    font-size: var(--font-size-2);
  }
  &.size-md {
    padding: var(--unit-2) var(--unit-4);
    font-size: var(--font-size-3);
  }
  &.size-lg {
    padding: var(--unit-3) var(--unit-5);
    font-size: var(--font-size-5);
  }
  // (CTA)
  &.size-xl {
    width: 100%;
    height: 80px;

    font-size: var(--font-size-6);
  }
}