// -----------------------------------------------------------------------------
// This file contains all styles related to the button component.
// -----------------------------------------------------------------------------

.c-button {
  display: inline-flex;
  align-items: center;
  margin-right: 1em;
  padding: 12px 20px;
  border: 2px solid;
  border-radius: 20px;
  text-transform: uppercase;
  font-weight: $font-weight-bold;
  font-size: 0.9em;
  cursor: pointer;
  transition: all 0.3s;

  &:hover {
    background-color: $white;
    color: $black;
    .c-icon {
      color: $black;
    }
  }

  &.has-icon {
    .c-button__title {
      margin-left: 7px;
    }
  }

  &--default {
    background-color: $white-10;
    border-color: rgba($white, 0.2);
  }

  &--transparent {
    border: 0;

    &:hover {
      color: $white;
    }
  }

  &--accent {
    border-color: $accent-color;
    background-color: $accent-color;
  }

  &--overlay {
    @include item-hover;
    position: absolute 10px 10px initial initial;
    padding: 3px;
    border-radius: 50%;
    font-size: 20px;
    background-color: $black-50;
  }

  &--icon,
  &--overlay {
    margin-right: 0;

    .c-button__icon {
      margin-right: 0;
    }
  }
}
