@use '../theme.scss' as *;
@use '../icogram.scss' as *;
@use '../mixins.scss';

.button-dim {
  display: inline-block;
  vertical-align: middle;
  border-width: $button-border-width;
  line-height: $button-line-height;
  height: $button-height;
  font-weight: bolder;
  box-sizing: border-box;
  padding-right: 0.8em;
  padding-left: 0.8em;
  padding-top: 0;
  padding-bottom: 0;
  font-size: $button-font-size;

  &.square {
    min-width: $button-height;
  }
}

.button,
.button[disabled] {
  border-width: $button-border-width;
  border-color: $button-border-color;
  border-style: solid;
  border-radius: $button-border-radius;
  line-height: $button-line-height;
  text-decoration: none;
  font-weight: bolder;
  vertical-align: middle;
  display: inline-block;
  height: $button-height;
  box-sizing: border-box;
  user-select: none;
  white-space: normal;
  @include mixins.clearfix;
  cursor: pointer;
  padding-right: 0.8em;
  padding-left: 0.8em;
  font-size: $button-font-size;
}

.button {
  & > .icogram {
    font-size: $button-label-font-size;
    font-weight: $button-label-font-weight;
    line-height: $button-line-height;
  }
}

.button.overflow-ellipsis > .icogram > .text {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

a.button,
a.button[disabled] {
  line-height: $input-elem-height;

  & > .icogram {
    line-height: inherit;
  }
}

span.button,
span.button[disabled] {
  display: inline-block;
  line-height: $button-line-height;
}

.button {
  &:focus-visible {
    outline: none;
  }

  &:active {
    outline: none;
  }

  &.square {
    min-width: $button-height;
    padding-right: 0;
    padding-left: 0;
    text-align: center;
  }
}

.button.disabled,
.button[disabled] {
  pointer-events: none;
  opacity: 0.75;
  cursor: default;
}

/* Standard variant */
.button {
  border-color: $button-border-color;
  background-color: $button-bg-color;
  color: $button-label-color;
  text-transform: $button-label-text-transform;
  transition: none;
}

.button:visited {
  color: $button-label-color;
}

.button.selected {
  color: $button-label-selected-color;
  background-color: $button-bg-selected-color;
  border-color: $button-bg-selected-hover-color;
}

.button.outline.selected,
.button.outline.selected:hover {
  color: $button-bg-selected-hover-color;
}

.button.outline.focused,
.button.outline.focused:hover {
  background-color: $button-label-disabled-color--emphasized-transparent;
}

.button:active,
.button.pressed,
.button.active {
  background-color: $button-bg-hover-color;
  color: $button-label-hover-color;
}

.button.selected:active,
.button.selected:visited,
.button.selected.pressed,
.button.selected.active {
  background-color: $button-bg-selected-hover-color;
  color: $button-label-selected-hover-color;
}

.button.disabled,
.button[disabled] {
  color: $button-label-disabled-color;
}

/* Emphasized variant */
.button.emphasized {
  border-color: $button-border-color--emphasized;
  background-color: $button-bg-color--emphasized;
  color: $button-label-color--emphasized;
}

.button.emphasized:active,
.button.emphasized:visited,
.button.emphasized.pressed,
.button.emphasized.active {
  background-color: $button-bg-hover-color--emphasized;
  color: $button-label-hover-color--emphasized;
}

/* Emphasized & transparent variant */
.button.emphasized-transparent {
  color: $button-label-color--emphasized-transparent;
  background: none;
}

.button.emphasized-transparent.disabled,
.button.emphasized-transparent[disabled] {
  color: $button-label-disabled-color--emphasized-transparent;
}

.button.emphasized-transparent:active,
.button.emphasized-transparent:visited,
.button.emphasized-transparent.pressed,
.button.emphasized-transparent.active {
  background: none;
  color: $button-label-hover-color--emphasized-transparent;
}

/* Transparent variant */
.button.transparent {
  color: $button-label-color--transparent;
  background: none;
}

.button.transparent.disabled,
.button.transparent[disabled] {
  color: $button-label-disabled-color--transparent;
}

.button.transparent:active,
.button.transparent:visited,
.button.transparent.pressed,
.button.transparent.active {
  background: none;
  color: $button-label-hover-color--transparent;
}

/* Transparent alternative variant */
.button.transparent-alt {
  background: none;
  background-color: transparent;
  color: $button-label-color--transparentalt;
}

.button.transparent-alt.disabled,
.button.transparent-alt[disabled] {
  color: $button-label-disabled-color--transparentalt;
}

.button.transparent-alt:active,
.button.transparent-alt:visited,
.button.transparent-alt.pressed,
.button.transparent-alt.active {
  background: none;
  color: $button-label-hover-color--transparentalt;
}

/* Half transparent variant */
.button.half-transparent {
  background: none;
  background-color: transparent;
  color: $button-label-color--half-transparent;
}

.button.half-transparent.disabled,
.button.half-transparent[disabled] {
  color: $button-label-disabled-color--half-transparent;
}

.button.half-transparent:active,
.button.half-transparent:visited,
.button.half-transparent.pressed,
.button.half-transparent.active {
  background-color: $button-bg-hover-color--half-transparent;
  color: $button-label-hover-color--half-transparent;
}

/* Danger variant */
.button.danger {
  color: $button-label-color--danger;
  background-color: $button-bg-color--danger;
}

.button.danger:active,
.button.danger:visited,
.button.danger.pressed,
.button.danger.active {
  color: $button-label-hover-color--danger;
  background-color: $button-bg-hover-color--danger;
}

.button.danger.disabled,
.button.danger[disabled] {
  color: $button-label-disabled-color--danger;
}

/* Suggestive variant */
.button.suggestive {
  color: $button-label-color--suggestive;
  background-color: $button-bg-color--suggestive;
}

.button.suggestive:active,
.button.suggestive:visited,
.button.suggestive.pressed,
.button.suggestive.active {
  color: $button-label-hover-color--suggestive;
  background-color: $button-bg-hover-color--suggestive;
}

.button.suggestive.disabled,
.button.suggestive[disabled] {
  color: $button-label-disabled-color--suggestive;
}

/* Outline modifier */
.outline {
  border-color: $button-bg-color;
  border-width: 1px;
}

/* Circular modifier */
.circular {
  border-radius: 50%;
}

/* Hover support */
@media (hover: hover) {
  .button:hover,
  .button:focus-visible,
  .button.hover,
  .button.focused {
    background-color: $button-bg-hover-color;
    color: $button-label-hover-color;
  }

  .button.selected:hover,
  .button.selected:focus-visible,
  .button.selected.hover,
  .button.selected.focused {
    background-color: $button-bg-selected-hover-color;
    color: $button-label-selected-hover-color;
  }

  .button.emphasized:hover,
  .button.emphasized:focus-visible,
  .button.emphasized.hover,
  .button.emphasized.focused {
    background-color: $button-bg-hover-color--emphasized;
    color: $button-label-hover-color--emphasized;
  }

  .button.emphasized-transparent:hover,
  .button.emphasized-transparent:focus-visible,
  .button.emphasized-transparent.hover,
  .button.emphasized-transparent.focused {
    background: none;
    color: $button-label-hover-color--emphasized-transparent;
  }

  .button.transparent:hover,
  .button.transparent:focus-visible,
  .button.transparent.hover,
  .button.transparent.focused {
    background: none;
    color: $button-label-hover-color--transparent;
  }

  .button.transparent-alt:hover,
  .button.transparent-alt:focus-visible,
  .button.transparent-alt.hover,
  .button.transparent-alt.focused {
    background: none;
    color: $button-label-hover-color--transparentalt;
  }

  .button.half-transparent:hover,
  .button.half-transparent:focus-visible,
  .button.half-transparent.hover,
  .button.half-transparent.focused {
    background-color: $button-bg-hover-color--half-transparent;
    color: $button-label-hover-color--half-transparent;
  }

  .button.danger:hover,
  .button.danger:focus-visible,
  .button.danger.hover,
  .button.danger.focused {
    color: $button-label-hover-color--danger;
    background-color: $button-bg-hover-color--danger;
  }

  .button.suggestive:hover,
  .button.suggestive:focus-visible,
  .button.suggestive.hover,
  .button.suggestive.focused {
    color: $button-label-hover-color--suggestive;
    background-color: $button-bg-hover-color--suggestive;
  }

  .button.outline.selected:hover,
  .button.outline.selected:focus-visible,
  .button.outline.selected.hover,
  .button.outline.selected.focused {
    border-color: $button-bg-selected-hover-color;
    color: $button-bg-selected-hover-color;
  }
}