@use '../_mixins' as mixins;

// Common button styles
.stasharr-button,
.stasharr-card-button {
  border: none;
  border-radius: 5px;
  padding: 10px;

  // Variants for button states
  &-add {
    @include mixins.button-variant(
      --stasharr-color-pink,
      --stasharr-color-white
    );
  }

  &-excluded {
    @include mixins.button-variant(
      --stasharr-color-red,
      --stasharr-color-white
    );
  }

  &-searchable {
    @include mixins.button-variant(
      --stasharr-color-yellow,
      --stasharr-color-black
    );

    // Unmonitored modifier
    &.unmonitored {
      @include mixins.button-variant(
        --stasharr-color-gray-1,
        --stasharr-color-white
      );
    }
  }

  &-downloaded {
    @include mixins.button-variant(
      --stasharr-color-green,
      --stasharr-color-white
    );
  }

  &-loading {
    @include mixins.button-variant(
      --stasharr-color-gray,
      --stasharr-color-white
    );
  }
}

// Specific styles for card buttons
.stasharr-card-button {
  position: absolute;
  top: 1%;
  right: 1%;
  border-radius: 10%; // Overrides default radius
  padding: 5px; // Overrides default padding
}

.whisparr-card-button,
a:hover.whisparr-card-button {
  border: none;
  position: absolute;
  cursor: pointer;
  top: 1%;
  left: 1%;
  border-radius: 10%;
  padding: 5px;
  background-color: var(--stasharr-color-pink);
}

.stash-card-button,
a:hover.stash-card-button {
  border: none;
  position: absolute;
  cursor: pointer;
  top: 18%;
  left: 1%;
  border-radius: 10%;
  padding: 5px;
  background-color: var(--bs-dark);
}

.copy-card-button {
  border: none;
  position: absolute;
  cursor: pointer;
  top: 18%;
  right: 1%;
  border-radius: 10%;
  padding: 5px;
  background-color: var(--bs-primary);
  color: white;
  z-index: 1;

  &:hover {
    background-color: var(--bs-primary);
    opacity: 0.8;
  }

  &:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), 0.5);
  }
}

.stasharr-studio-add,
.stasharr-performer-add {
  color: var(--stasharr-color-pink);
}
