@use './colors';
@use './scaling';
/*
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);
*/

.icon-btn {
  color: var(--thorium-text) !important;
  text-decoration: none;
  cursor: pointer;
  border: none;

  &:hover {
    color: var(--thorium-highlight-text) !important;
    border: none;
  }

  &:disabled {
    color: var(--thorium-text) !important;
    filter: brightness(40%);
    border: none;
  }

  &:active {
    border: none;
  }
}

.download-btn {
  @extend .icon-btn;
  width: 120px;
}

.clear-btn {
  color: var(--thorium-text);
  background-color: inherit;
  border: none;
  margin-left: 0.1em;
  margin-right: 0.1em;

  &:disabled {
    filter: brightness(40%);
  }

  &:active {
    filter: brightness(60%);
  }

  &:focus {
    filter: brightness(60%);
  }

  &:hover {
    filter: brightness(60%);
  }
}

.primary-btn {
  color: var(--thorium-button-text) !important;
  background-color: var(--thorium-info-bg) !important;
  border-color: var(--thorium-info-bg) !important;
  margin-left: 0.1em;
  margin-right: 0.1em;

  &:disabled {
    filter: brightness(60%);
  }

  &:active {
    filter: brightness(80%);
    box-shadow: 0 0 0 0.1rem var(--thorium-highlight-panel-border);
  }

  &.selected {
    background-color: var(--thorium-info-secondary-bg) !important;
    border-color: var(--thorium-info-secondary-bg) !important;
  }

  &:focus {
    filter: brightness(80%);
  }

  &:hover {
    filter: brightness(80%);
  }
}

.secondary-btn {
  color: var(--thorium-button-text) !important;
  background-color: var(--thorium-empty-bg) !important;
  border-color: var(--thorium-empty-bg) !important;
  margin-left: 0.1em;
  margin-right: 0.1em;

  &:disabled {
    filter: brightness(60%);
  }

  &:active {
    filter: brightness(80%);
    box-shadow: 0 0 0 0.1rem var(--thorium-highlight-panel-border);
  }

  &:focus {
    filter: brightness(80%);
  }

  &:hover {
    filter: brightness(80%);
  }
}

.ok-btn {
  color: var(--thorium-button-text) !important;
  background-color: var(--thorium-ok-bg) !important;
  border-color: var(--thorium-ok-bg) !important;
  margin-left: 0.1em;
  margin-right: 0.1em;

  &:disabled {
    filter: brightness(60%);
  }

  &:active {
    filter: brightness(80%);
    box-shadow: 0 0 0 0.1rem var(--thorium-highlight-panel-border);
  }

  &:focus {
    filter: brightness(80%);
  }

  &:hover {
    filter: brightness(80%);
  }
}

.warning-btn {
  color: var(--thorium-button-text) !important;
  background-color: var(--thorium-warning-bg) !important;
  border-color: var(--thorium-warning-bg) !important;
  margin-left: 0.1em;
  margin-right: 0.1em;

  &:disabled {
    filter: brightness(60%);
  }

  &:active {
    filter: brightness(80%);
    box-shadow: 0 0 0 0.1rem var(--thorium-highlight-panel-border);
  }

  &:focus {
    filter: brightness(80%);
  }

  &:hover {
    filter: brightness(80%);
  }
}

.danger-btn {
  color: var(--thorium-button-text) !important;
  background-color: var(--thorium-danger-bg) !important;
  border-color: var(--thorium-danger-bg) !important;
  margin-left: 0.1em;
  margin-right: 0.1em;

  &:disabled {
    filter: brightness(60%);
  }

  &:active {
    filter: brightness(80%);
    box-shadow: 0 0 0 0.1rem var(--thorium-highlight-panel-border);
  }

  &:focus {
    filter: brightness(80%);
  }

  &:hover {
    filter: brightness(80%);
  }
}

.tlp-btn {
  width: auto;
  border-color: colors.$tlp-outline !important;
  margin-left: 0.1em;
  margin-right: 0.1em;
  filter: var(--thorium-disabled-brightness);

  &:disabled {
    filter: var(--thorium-disabled-brightness);
  }

  &:active {
    filter: var(--thorium-active-brightness);
  }

  &.selected {
    filter: var(--thorium-selected-brightness);
    box-shadow: 0 0 0 0.2rem var(--thorium-text);
  }

  &:focus {
    filter: var(--thorium-hover-brightness);
  }

  &:hover {
    filter: var(--thorium-hover-brightness);
  }
}

.tlp-red-btn {
  color: colors.$tlp-text-light !important;
  background-color: colors.$tlp-red !important;
}

.tlp-amber-btn {
  color: colors.$tlp-text-light !important;
  background-color: colors.$tlp-amber !important;
}

.tlp-green-btn {
  color: colors.$tlp-text-light !important;
  background-color: colors.$tlp-green !important;
}

.tlp-clear-btn {
  color: colors.$tlp-text-dark !important;
  background-color: colors.$tlp-clear !important;
}
