@import "../../../styles/utilities";

.buttonCommon {
  @apply shape-common;
  .inner {
    padding: 1rem 2rem;
    @apply bg-primary transition-all duration-200 text-white font-bold;
    display: flex;
    justify-content: center;
    align-items: center;
    @screen md {
      padding: 1.6rem 1.6rem;
    }
    @screen lg {
      padding: 1.6rem 3.2rem;
    }
    &:disabled {
      filter: brightness(0.9);
      cursor: not-allowed;
      color: var(--disabled);
    }
    &:hover {
      @apply shadow-md;
      &:not(:disabled) {
        filter: brightness(1.05);
      }
    }
    &:focus {
      outline: none;
      filter: brightness(1.05);
    }
    &:focus-visible {
      outline: 2px solid var(--text-active);
    }
  }
  &.loading {
    .inner {
      &::after {
        content: "";
        border-radius: 50%;
        width: 1.6rem;
        height: 1.6rem;
        border: 3px solid rgba(170, 170, 170, 0.5);
        border-top: 3px solid var(--white);
        -webkit-animation: spin 2s linear infinite;
        animation: spin 2s linear infinite;
        margin-right: 0.8rem;
      }
    }
  }

  &.light {
    @apply shape-common-border;
    &::before {
      background-color: var(--text-active);
    }
    .inner {
      @apply text-base bg-white;
    }
    &.loading {
      .inner {
        &::after {
          border-top-color: var(--primary);
        }
      }
    }
  }

  &.lightBorderNone {
    .inner {
      @apply bg-white text-primary;
    }
    &.loading {
      .inner::after {
        border-top-color: var(--primary);
      }
    }
  }

  &.ghost {
    @apply shape-common-border;
    .inner {
      @apply bg-white text-primary;
    }
    &::before {
      background-color: var(--primary);
    }
    &.loading {
      .inner::after {
        border-top-color: var(--text-active);
      }
    }
  }

  &.onlyIcon {
    .inner {
      padding: 1rem;
      @screen md {
        padding: 1.6rem;
      }
      .icon {
        margin: 0;
      }
    }
  }

  &.large {
    .inner {
      padding: 1rem 1.6rem;
      &.onlyIcon {
        padding: 1rem;
      }
      @screen md {
        padding: 1.6rem 3.2rem;
        &.onlyIcon {
          padding: 1.6rem;
        }
      }
      @screen lg {
        padding: 1.6rem 4.8rem;
      }
    }
    &.loading {
      .inner::before {
        width: 2.4rem;
        height: 2.4rem;
      }
    }
  }

  &.preserve {
    .inner {
      flex-direction: row-reverse;
      .icon {
        margin: 0 0 0 1.6rem;
      }
    }
  }

  .icon {
    margin: 0 1.6rem 0 0;
    svg {
      height: 2rem;
      path {
        fill: currentColor;
      }
    }
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}