@import '../utils/colors';

.button {
  /* General Styling */
  padding: 6px 24px;
  border-radius: 4px;
  gap: 10px;
  border: 2px solid transparent;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;

  /* Typography */
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 29px;
  text-align: center;
  cursor: pointer;

  &:hover {
    transition: ease-out 300ms;
  }

  &.medium {
    padding: 6px 24px;
    gap: 10px;
  }

  &.small {
    padding: 0 1.25rem;
    gap: 8px;
  }

  &.icon-right {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &.icon-left {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
  }

  &.primary {
    background-color: var(--button-states-primary-default);
    color: var(--theme-color-white);

    &:hover {
      background-color: var(--button-states-primary-hover);
      filter: drop-shadow(0px 4px 14px var(--button-states-primary-hover-shadow));
    }

    &:focus {
      border-color: var(--theme-color-secondary);
      background-color: var(--button-states-primary-focus);
    }

    &:active {
      border-color: var(--button-states-primary-active);
      background-color: var(--button-states-primary-active);
    }

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

  &.secondary {
    background-color: var(--theme-color-white);
    color: var(--theme-color-primary);
    border-color: var(--theme-color-primary);

    &:hover {
      background: var(--opacity-color-primary, rgba(65, 134, 241, 0.18));
    }

    &:focus {
      background-color: var(--secondary-bg-color-hover);
      border-color: var(--secondary);
    }

    &:active {
      background-color: var(--secondary-bg-color-hover);
    }

    &:disabled {
      border-color: transparent;
      color: var(--theme-color-white);
      background-color: var(--secondary-bg-color-disabled);
    }
  }

  &.none {
    background-color: transparent;
    color: var(--font-color-label);
  }
}