.button-component {
  color: $color-white;
  background-color: $color-blue;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-weight: $font-weight-semibold;
  border: 1px solid $color-blue;
  font-size: $text-smallest;
  height: 32px;
  padding-left: $base-spacing-quad;
  padding-right: $base-spacing-quad;
  border-radius: $border-radius-small;

  &.circle {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: $border-radius-circle;
    height: 32px;
    width: 32px;

    &.small {
      height: 24px;
      width: 24px;
    }

    &.large {
      height: 50px;
      width: 50px;
    }
  }

  &.medium {
    height: 40px;
    font-size: $text-small;
    padding-left: $base-spacing-sex;
    padding-right: $base-spacing-sex;
  }

  &.red {
    background-color: $color-red;
    border: 1px solid $color-red;

    &.disabled {
      opacity: 0.5;

      &:hover {
        background-color: $color-red;
        cursor: not-allowed;
        border: 1px solid $color-red;
      }
    }

    &:hover {
      background-color: $color-red-hover;
      border: 1px solid $color-red-hover;
    }

    &:focus {
      outline: none;
    }

    &.active {
      // This will be the same as the class for focus, might be used for something else though.
      outline: none;
      background-color: $color-red-active;
      border: 1px solid $color-red-active;
    }
  }

  &.white {
    color: $color-mid-grey;
    background-color: $color-white;
    border: 1px solid $color-light-grey;

    &.disabled {
      opacity: 0.5;

      &:hover {
        background-color: $color-white;
        cursor: not-allowed;
        border: 1px solid $color-light-grey;
      }
    }

    &:hover {
      background-color: $color-white-hover;
      border: 1px solid $color-light-grey;
    }

    &:focus {
      outline: none;
    }

    &.active {
      // This will be the same as the class for focus, might be used for something else though.
      outline: none;
      background-color: $color-white-active;
      border: 1px solid $color-light-grey;
    }
  }

  &.grey {
    color: $color-mid-grey;
    background-color: $color-lightest-grey;
    border: 1px solid $color-light-grey;

    &.disabled {
      opacity: 0.5;

      &:hover {
        background-color: $color-lightest-grey;
        cursor: not-allowed;
        border: 1px solid $color-light-grey;
      }
    }

    &:hover {
      background-color: $color-grey-hover;
      border: 1px solid $color-light-grey;
    }

    &.active {
      outline: none;
      background-color: $color-grey-active;
      border: 1px solid $color-light-grey;
    }

    &:focus {
      outline: none;
    }
  }

  &.dark-grey {
    color: $color-white;
    opacity: 0.8;
    background-color: $color-dark-grey;
    border: 1px solid $color-dark-grey;

    &.disabled {
      opacity: 0.1;

      &:hover {
        cursor: not-allowed;
        background-color: $color-dark-grey;
        border: 1px solid $color-dark-grey;
        opacity: 0.1;
      }
    }

    &:hover {
      opacity: 1;
      background-color: $color-dark-grey;
      border: 1px solid $color-dark-grey;
    }

    &:focus {
      outline: none;
    }
  }

  // note on all the rgba values here, they are the color-blue variation rgba equivalents with opacity applied
  // you can't just apply opacity to the background-color in css, it'll hit the text-color too
  &.minimal {
    background-color: rgba(0, 118, 255, 0.01);
    border: 1px solid rgba(0, 118, 225, 0.01);
    color: $color-blue;

    &.disabled {
      opacity: 0.5;

      &:hover {
        cursor: not-allowed;
        background-color: rgba(0, 118, 255, 0.01);
        border: 1px solid rgba(0, 118, 225, 0.01);
      }
    }

    &:hover {
      background-color: rgba(12, 110, 224, 0.08);
      border: 1px solid rgba(12, 110, 224, 0.08);
    }

    &:focus {
      outline: none;
    }

    &.active {
      // This will be the same as the class for focus, might be used for something else though.
      outline: none;
      background-color: rgba(17, 99, 194, 0.16);
      border: 1px solid rgba(17, 99, 194, 0.16);
    }
  }

  &:focus {
    outline: none;
  }

  &.active {
    outline: none;
    background-color: $color-blue-active;
    border: 1px solid $color-blue-active;
  }

  &:hover {
    border: 1px solid $color-blue-hover;
    background-color: $color-blue-hover;
    cursor: pointer;
  }

  &.disabled {
    opacity: 0.5;

    &:hover {
      background-color: $color-blue;
      cursor: not-allowed;
      border: 1px solid $color-blue;
    }
  }
}

.button-group {
  display: flex;

  .button-component:first-of-type {
    border-radius: $border-radius-small 0 0 $border-radius-small;
    border-width: 1px 1px 1px 1px;
  }

  .button-component:last-of-type {
    border-width: 1px 1px 1px 0px;
    border-radius: 0 $border-radius-small $border-radius-small 0;
  }

  .button-component:not(:first-child):not(:last-child) {
    border-radius: 0;
    border-left: none;
  }
}