$info-color: color('primary-3');
$action-color: color('primary-1');
$selected-color: color('secondary-1');
$unselected-color: color('neutral-4');
$brand-white: color('primary-2');

.icon {
  position: relative;
  width: rem-calc(14);
  height: rem-calc(16);
  top: rem-calc(1);
  margin-right: rem-calc(6);
}

.button {
  @include typography-label;

  display: block;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  color: $brand-white;
  margin: 0;
  padding-top: rem-calc(14);
  padding-bottom: rem-calc(14);
  background-color: $action-color;
  border: 2px solid $action-color;
  border-radius: 0;
  transition: all 100ms;
  width: 100%;
  outline: none;
  white-space: normal;

  &:active,
  &:focus {
    outline: none;
  }

  .icon path {
    transition: fill 300ms ease-out;
    fill: $brand-white;
  }

  &.outline {
    background-color: $brand-white;
    color: $action-color;
    border: 2px solid inherit;

    .icon path {
      fill: $action-color;
    }
  }
}

.toggle, .toggle-unselected, .toggle-selected {
  display: block;
  background-color: $brand-white;
}

.toggle, .toggle-unselected {
  color: color('neutral-2');
  border: 2px solid $unselected-color;
}

.toggle-selected {
  color: color('primary-1');
  border: 2px solid color('primary-1');
  background: color('brand-orange-100');

  &:hover {
    cursor: default;
  }
}

.info {
  display: block;
  background-color: $info-color;
  border-color: $info-color;
  color: $brand-white;

  &.outline {
    background-color: $brand-white;
    color: $info-color;
    border: 2px solid color('brand-gray-300');

    .icon path {
      fill: $info-color;
    }
  }
}

.unflex {
  width: auto;
  clear: both;
  padding-left: rem-calc(19);
  padding-right: rem-calc(19);
  display: inline-block;
}

.disabled {
  color: color('neutral-2');
  background-color: color('neutral-4');
  border: 2px solid color('neutral-4');
  cursor: not-allowed;
  user-select: none;

  .icon path {
    fill: color('neutral-2');
  }

  &.outline {
    background-color: $brand-white;
    color: color('neutral-4');

    .icon path {
      fill: color('neutral-4');
    }
  }
}

@media #{$tablet} {
  .button:not( .disabled ) {
    &:hover {
      transform: scale(1.03);
    }
  }

  .no-hover:not( .disabled ) {
    &:hover {
      transform: scale(1);
    }
  }
}