// Name:            Button
// Description:     Buttons in website
//
// Component:       `c-btn`
//         
//
// Dependencies:    `settings/color.tokens`
//                  `settings/spacing.tokens`
//                  `v7_colors`
//
// ========================================================================
@use '../../../assets/sass/settings/v7/colors.tokens' as *;
@use '../../../assets/sass/settings/v7/spacing.tokens' as *;
@use '../../../assets/sass/settings/v7/layout-standard' as *;
@use '../../../assets/sass/settings/v7/global' as *;

.c-btn {

  // Custom properties
  // ======================================================================

  --btn-radius: #{$global-radius};
  --btn-color: #{$ui-02};
  --btn-label: #{$text-01};

  // ======================================================================

  padding: $padding-xsmall $padding-base;
  border: none;
  border-radius: var(--btn-radius);
  background-color: var(--btn-color);
  box-shadow: 0 0 0 1px var(--btn-color);
  color: var(--btn-label);
  transition: $global-interactive-transition;

  //
  // States - Disables
  // 

  &:disabled {
    cursor: not-allowed;
  }

  // Size Variants
  // ========================================================================

  &--large {
    padding: $padding-small $padding-base;
  }

  &--small {
    padding: $padding-xxsmall $padding-small;
  }

  // Color Variants
  // ========================================================================

  //
  // Default color
  //
  &--naked,
  &--default {
    --btn-color: var(--btn-default-color);
    --btn-label: var(--btn-default-label);
    background-color: transparent;

    &:hover {
      --btn-color: #{$ui-03};
      --btn-label: #{$text-02};
    }

    &:disabled {
      --btn-color: #{$disabled-02};
      --btn-label: #{$disabled-02};
    }
  }

  //
  // Primary color
  //
  &--primary {
    --btn-color: #{$interactive-01};
    --btn-label: #{$inverse-01};

    &:hover {
      --btn-color: #{$hover-01};
    }

    &:disabled {
      --btn-color: #{$disabled-01};
      --btn-label: #{$disabled-02};
    }

    [data-accessibility*="on"] & {
      --btn-color: var(--btn-secondary-color);
      --btn-label: var(--btn-secondary-label);

      &:hover {
        --btn-color: var(--btn-secondary-color-hover);
      }

      &:disabled {
        --btn-color: #{$disabled-02};
        --btn-label: #{$disabled-02};
      }
    }
  }

  &--evidence {
    --btn-color: var(--theme-color);

    &:hover {
      --btn-color: var(--theme-color-light);
    }
  }

  // Shape Variants
  // ========================================================================

  &--rounded {
    --btn-radius: 40px;
  }

  @if $layout !=amp {
    &--active {
      background-color: var(--theme-color);
      box-shadow: 0 0 0 1px var(--theme-color);
      color: $link-01;
    }

    &--inverse {
      --btn-color: #{$ui-01};
      --btn-label: #{$ui-01};
      background-color: transparent;
    }

    //
    // Secondary color
    //

    &--secondary {
      --btn-color: var(--btn-secondary-color);
      --btn-label: var(--btn-secondary-label);

      &:hover {
        --btn-color: var(--btn-secondary-color-hover);
      }

      &:disabled {
        --btn-color: #{$disabled-02};
        --btn-label: #{$disabled-02};
      }
    }

    //
    // Special color
    //

    &--special {
      --btn-color: var(--theme-color);
      --btn-label: var(--btn-default-label);
      background-color: transparent;

      &:hover {
        background: linear-gradient(#22274e, var(--theme-color));
        color: #{$link-01};
      }
    }

    &--error {
      --btn-color: #{$color-red};
      --btn-label: #{$inverse-01};
      background-color: transparent;

      &:hover {
        background: linear-gradient(#22274e, var(--theme-color));
        color: #{$link-01};
      }
    }



    // Style Variants
    // ========================================================================
    &--naked,
    &--reset,
    &--link {
      --btn-color: transparent;
      box-shadow: none;
    }

    &--reset {
      margin: 0;
      padding: 0;
      border: none;
    }

    &--link {
      --btn-label: #{$interactive-01};

      &:hover {
        --btn-label: #{$hover-01};
      }

      &:disabled {
        --btn-label: #{$disabled-01};
      }
    }


    // Custom Variants
    // ========================================================================

    &--facebook {

      --btn-color: #1877f2;
      --btn-label: #{$inverse-01};
      font-weight: 700;
      text-align: center;

      &:hover {
        --btn-color: var(--btn-secondary-color-hover);
      }
    }

    &--google {

      --btn-color: #cf4332;
      --btn-label: #{$inverse-01};
      font-weight: 700;
      text-align: center;

      &:hover {
        --btn-color: var(--btn-secondary-color-hover);
      }
    }

    &--apple {

      --btn-color: var(--btn-secondary-color);
      --btn-label: var(--btn-secondary-label);
      font-weight: 700;
      text-align: center;

      &:hover {
        --btn-color: var(--btn-secondary-color-hover);
      }
    }

    &--socials {

      --btn-color: var(--btn-default-color);
      --btn-label: var(--btn-default-label);
      background-color: transparent;

      &:hover {
        --btn-color: #{$ui-03};
        --btn-label: #{$text-02};
      }

      &:disabled {
        --btn-color: #{$disabled-02};
        --btn-label: #{$disabled-02};
      }

    }

    &__discount {
      background-color: #{$color-green};
      top: -1rem;
      right: .5rem;
    }
  }
}