// Plik: components/_buttons.scss

// Importujemy zmienne, aby mieć dostęp do naszych kolorów, czcionek itp.
@use '../abstracts/variables' as *;
@use '../base/typography' as *;

@use 'sass:color';

// Definiujemy promień zaokrąglenia dla przycisków.
// Możesz dodać tę zmienną do swojego pliku `abstracts/_variables.scss`!
// $border-radius-base: 4px;

.button {
  position: relative;
  // --- Struktura i wygląd ---
  display: inline-flex; // Używamy inline-flex dla łatwego centrowania zawartości
  gap: 0.5em; // Odstęp między ikoną a tekstem
  align-items: center;
  justify-content: center;
  padding: 0.75em 1.5em; // Używamy `em` aby padding skalował się z rozmiarem czcionki
  border: 2px solid transparent; // Przezroczysta ramka zapobiega "skakaniu" przycisku
  border-radius: 4px; // lub użyj zmiennej $border-radius-base
  cursor: pointer;

  // --- Typografia ---
  font-family: $font-family-base;
  font-size: 0.95rem; // 16px
  font-weight: 600; // Pogrubienie
  text-decoration: none; // Usuwa podkreślenie z linków <a>
  text-align: center;
  letter-spacing: 0.5px;
  line-height: 1.25; // Ustawiamy linię wysokości dla lepszej czytelności
  
  // --- Kolory i przejścia ---
  background-color: $color-main;
  color: $white; // Zakładamy, że główny kolor ma dobry kontrast z białym
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;

  &--small {
    // Mniejszy przycisk
    padding: 0.5em 1em; // Mniejszy padding
    font-size: 0.85rem; // Mniejsza czcionka
  }

  &--circle {
    // Przycisk w kształcie koła
    width: 2.5em; // Szerokość przycisku
    height: 2.5em; // Wysokość przycisku
    border-radius: 50%; // Zaokrąglamy do pełnego koła
    padding: 0; // Usuwamy padding, aby ikona była wyśrodkowana
    justify-content: center; // Centrujemy ikonę w przycisku
  }

  // &__icon {
  //   display: flex;
  //   align-items: center;
  //   justify-content: center;
  //   width: 1.15em; // Ustawiamy szerokość ikony
  //   height: 100%; // Ustawiamy wysokość ikony
  //   // color: $color-text-muted;
  // }

  // --- Stany przycisku ---
  &:hover {
    // Przyciemniamy tło po najechaniu myszką
    background-color: color.scale($color-main, $lightness: -10%); // Przyciemniamy kolor o 10%
  }

  &:focus-visible {
    // Ważne dla dostępności! Dodajemy widoczny zarys dla nawigacji klawiaturą.
    outline: 2px solid $color-main;
    outline-offset: 2px;
  }

  &:disabled,
  &[disabled] {
    // Styl dla nieaktywnego przycisku
    opacity: 0.6;
    cursor: not-allowed;
  }

  // --- MODYFIKATORY (zmiana wyglądu za pomocą dodatkowych klas) ---

  // Modyfikator koloru "danger"
  &--danger {
    background-color: $color-danger;
    color: $white;

    &:hover {
      background-color: color.scale($color-danger, $lightness: -10%); // Przyciemniamy kolor
    }

    &:focus-visible {
      outline-color: $color-danger;
    }
  }

  // Modyfikator stylu "outline" (przycisk z samą ramką)
  &--outline {
    background-color: transparent;
    border-color: $color-main;
    color: $color-main;

    &:hover {
      background-color: $color-main;
      color: $white;
    }
  }

  &--social {
    // Styl dla przycisków społecznościowych
    font-size: 0.85rem; // Mniejsza czcionka dla przycisków społecznościowych
    line-height: 1.25rem;
    background-color: $color-bg-element-hover; // Używamy koloru tła elementu
    color: $color-text-base; // Używamy podstawowego koloru tekstu
    border-color: $color-border; // Używamy koloru ramki zdefiniowanego w zmiennych

    & img {
      width: 1rem; // Ustawiamy szerokość ikony społecznościowej
      height: 1rem; // Ustawiamy wysokość ikony społecznościowej
    }

    &:hover {
      background-color: $color-bg-element; // Przyciemniamy tło po najechaniu
    }

    &:focus-visible {
      outline-color: $color-border-focus; // Używamy koloru fokusu zdefiniowanego w zmiennych
    }

    &[data-last-used="true"] {
      position: relative;
      
      &::after {
        content: "ostatnio użyto";
        position: absolute;
        top: -8px;
        right: 8px;
        background-color: $color-main;
        color: $black;
        font-size: 0.7rem;
        font-weight: 600;
        padding: 0.2em 0.5em;
        border-radius: 3px;
        line-height: 1;
        z-index: 50;
      }
    }
  }

  &--text {
    // Styl dla przycisków tekstowych
    background-color: transparent; // Przezroczyste tło
    color: $color-text-base; // Używamy podstawowego koloru tekstu
    border: none; // Usuwamy ramkę

    &:hover {
      background-color: $color-bg-element-hover; // Przyciemniamy tło po najechaniu
    }
  }

  &--image {
    padding: 0;
    border: 0;
    overflow: hidden;
  }
}