// Import custom variables
@import "variables-dark";

// Import Spectre CSS lib
@import "spectre";

// Import style modules
@import "base";
@import "responsive";
@import "bookmark-details";
@import "bookmark-page";
@import "bookmark-form";
@import "settings";
@import "markdown";

/* Dark theme overrides */

// Buttons
.btn.btn-primary {
  background: $dt-primary-button-color;
  border-color: darken($dt-primary-button-color, 5%);

  &:hover, &:active, &:focus {
    background: darken($dt-primary-button-color, 5%);
    border-color: darken($dt-primary-button-color, 10%);
  }
}

// Focus ring
a:focus, .btn:focus {
  box-shadow: 0 0 0 .1rem rgba($primary-color, .5);
}

// Forms
.form-input:not(:placeholder-shown):invalid,
.form-input:not(:placeholder-shown):invalid:focus,
.has-error .form-input,
.form-input.is-error,
.has-error .form-select,
.form-select.is-error {
  background: darken($error-color, 40%);
}

.form-checkbox input:checked + .form-icon, .form-radio input:checked + .form-icon, .form-switch input:checked + .form-icon {
  background: $dt-primary-input-color;
  border-color: $dt-primary-input-color;
}

.form-switch .form-icon::before, .form-switch input:active + .form-icon::before {
  background: $light-color;
}

.form-switch input:checked + .form-icon {
  background: $dt-primary-input-color;
  border-color: $dt-primary-input-color;
}

.form-radio input:checked + .form-icon::before {
  background: $light-color;
}

// Pagination
.pagination .page-item.active a {
  background: $dt-primary-button-color;
}