@import 'variables';

.jfButton {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  outline: 2px solid transparent;
  outline-offset: 0;
  transition: all 0.3s;
  color: var(--jfv-white);
  border: 0;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  &:hover,
  &:focus {
    color: var(--jfv-white);
  }
  &:not(.jfButton--rounded) {
    border-radius: 4px;
  }
  &:disabled {
    cursor: not-allowed;
    opacity: 0.4;
    pointer-events: none;
  }
  &--full-width {
    width: 100%;
  }
  &--rounded {
    border-radius: 9998px;
  }
  &--icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  &--loading {
    pointer-events: none;
    cursor: default;
    position: relative;
    .jfButton--text {
      opacity: 0;
    }
    .jfButton--icon {
      opacity: 0;
    }
    .jfButton--spin {
      opacity: 1;
    }
  }
  &--loader-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    z-index: 1;
  }
  &--text-hidden {
    opacity: 0;
    white-space: nowrap;
  }
  .jfButton--show-text-on-hover:hover &--text-hidden {
    opacity: 1;
  }
  &--text-opacity-0 {
    opacity: 0;
  }
  &--indicator-hidden {
    opacity: 0;
  }
  &--spin {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
    opacity: 0;
    &:before {
      content: "";
      position: absolute;
      inset: -2px;
      border-radius: 50%;
      border: 2px solid;
      border-top-color: transparent;
      border-bottom-color: transparent;
      border-left-color: transparent;
      border-right-color: currentColor;
      animation: spin-loader 0.7s linear infinite;
    }
  }
  &--small {
    height: 32px;
    padding: 0 12px;
    .jfButton--text { font-size: 14px; line-height: 18px; padding: 0 4px; }
    .jfButton--icon { width: 16px; height: 16px; svg { width: 16px; height: 16px; } }
  }
  &--medium {
    height: 40px;
    padding: 0 10px;
    .jfButton--text { font-size: 14px; line-height: 18px; padding: 0 8px; }
    .jfButton--icon { width: 20px; height: 20px; svg { width: 20px; height: 20px; } }
  }
  &--large {
    height: 48px;
    padding: 0 12px;
    .jfButton--text { font-size: 18px; line-height: 22px; padding: 0 12px; }
    .jfButton--icon { width: 24px; height: 24px; svg { width: 24px; height: 24px; } }
  }
  &--primary {
    background: var(--jfv-blue-500);
    &:hover { background: var(--jfv-blue-600); }
    &.jfButton--ghost {
      background: transparent;
      color: var(--jfv-blue-500);
      &:hover { background: var(--jfv-blue-100); }
    }
    &.jfButton--outline {
      background: transparent;
      color: var(--jfv-blue-500);
      border: 1px solid var(--jfv-blue-500);
      &:hover { background: var(--jfv-blue-100); }
    }
  }
  &--secondary {
    background: var(--jfv-navy-75);
    color: var(--jfv-navy-500);
    &:hover { background: var(--jfv-navy-100); }
    &.jfButton--ghost {
      background: transparent;
      color: white;
    }
    &.jfButton--outline {
      background: transparent;
      color: var(--jfv-navy-500);
      border: 1px solid var(--jfv-navy-100);
      &:hover { background: #e8e8f2; }
    }
  }
  &--success {
    background: var(--jfv-green-500);
    &:hover { background: var(--jfv-green-600); }
  }
  &--teams {
    background: var(--jfv-teams-default);
    &:hover { background: var(--jfv-teams-light); }
  }
  &--error {
    background: var(--jfv-red-400);
    &:hover { background: var(--jfv-red-500); }
  }
}

@keyframes spin-loader {
  to { transform: rotate(360deg); }
}