@import '../../styles/colors';
@import '../../styles/mixins';
@import '../../styles/variables';
@import '../../styles/borders';
@import '../../styles/shadows';

$color-primary: palette(highlight, 400);
$color-gray: palette(base, 300);

.btn {
  @include font-button;
  color: font-color(regular);
  position: relative;
  text-align: center;
  padding: 0 42px;
  white-space: nowrap;
  cursor: pointer;
  transition: color ease 0.4s, background-color ease 0.4s, box-shadow ease 0.2s,
    text-shadow ease 0.2s;

  display: flex;
  flex-direction: row;
  align-items: center;

  user-select: none;

  box-shadow: 0;
  text-shadow: 0;

  outline: none;

  border: solid 10px blue !important;

  span {
    width: 100%;
  }

  &:not(.noLabel) svg {
    margin-right: 8px;
  }

  &.middle {
    text-align: center;
    padding: 0 20px;
  }
  &.left {
    text-align: left;
    padding: 0 20px;
  }
  &.right {
    text-align: right;
    padding: 0 20px;
  }
  &.noLabel {
    padding: 0 14px;
  }

  &:hover {
    color: font-color(light);

    background-color: palette(base, 400);
  }

  &:active {
    color: font-color(light);
  }

  &:focus {
    @extend .btn:hover;
  }

  &.border {
    @include border($color-primary);

    &:hover {
      @include text-glow(3);
      color: palette(highlight);
    }

    &:active {
      @include text-glow(3);
      color: font-color(lowlight);
    }

    &:focus {
      @extend .border:hover;
    }
  }
}

a.navLinkSelected .btn,
.primary {
  border: 0;

  color: font-color(dark);
  background-color: palette(highlight, 400);

  &:hover {
    @include glow(3);
    color: font-color(dark);
    background-color: palette(highlight, 400);
  }

  &:active {
    @include glow(4);
  }

  &:focus {
    @extend .primary:hover;
  }
}

.dark {
  color: font-color(regular);
  background-color: $bg-color-dark;

  &:hover {
    color: font-color(light);
  }

  &:active {
    box-shadow: none;
  }

  &.disabled {
    color: font-color(disabled);
  }
}

.grey {
  color: font-color(light);
  background-color: $color-gray;

  &:hover {
    color: font-color(light);
  }

  &:active {
    box-shadow: none;
  }
}

.transparent {
  color: font-color(regular);
  background-color: transparent;

  &:hover {
    color: font-color(light);
  }

  &:active {
    box-shadow: none;
  }

  &.primary {
    background-color: $bg-highlighted;
    color: white;
  }
}

.label {
  color: font-color(lowlight);
}

.disabled {
  color: font-color(disabled);
  pointer-events: none;
  opacity: 0.5;
}