@import "../style/colors";
// Variables
$roundButtonDefaultBorderRadius: 50%;
$roundButtonDefaultSize: 54px;
$roundButtonMdSize: 44px;
$roundButtonSmSize: 34px;
$roundButtonXsmSize: 24px;
$roundButtonDefaultColor: $white;
$roundButtonDefaultBackgroundColor: $seafoam-1;
$roundButtonHoverOpacity: 0.6;
$roundButtonDisabledOpacity: 0.15;
$roundButtonDefaultDisabledBackground: rgba($midnight-1, $roundButtonDisabledOpacity);
$roundButtonDefaultDisabledColor: rgba($midnight-1, $roundButtonDisabledOpacity);
$roundButtonDefaultDisabledBorder: 1px solid rgba($midnight-1, $roundButtonDisabledOpacity);

// Buttons
.la-round-button {
  padding: 0;
  height: $roundButtonDefaultSize;
  width: $roundButtonDefaultSize;
  color: $roundButtonDefaultColor;
  border-radius: $roundButtonDefaultBorderRadius;
  background: $roundButtonDefaultBackgroundColor;
  cursor: pointer;
  text-align: center;
  border: none;

  &:hover, &--hover {
    opacity: $roundButtonHoverOpacity;
  }
  &.la-round-button--disabled {
    color: $roundButtonDefaultDisabledColor;
    background: $roundButtonDefaultDisabledBackground !important;
    border: $roundButtonDefaultDisabledBorder;
    cursor: not-allowed;
    la-icon > svg {
      fill: $roundButtonDefaultDisabledColor !important;
    }
  }

  .la-icon {
    max-height: $roundButtonDefaultSize;
    max-width: $roundButtonDefaultSize;
  }

  &--x-small {
    height: $roundButtonXsmSize;
    width: $roundButtonXsmSize;
    line-height: 3.4px;

    .la-icon {
      max-height: $roundButtonXsmSize;
      max-width: $roundButtonXsmSize;
    }
  }

  &--small {
    height: $roundButtonSmSize;
    width: $roundButtonSmSize;
    line-height: 3.4px;

    .la-icon {
      max-height: $roundButtonSmSize;
      max-width: $roundButtonSmSize;
    }
  }

  &--medium {
    height: $roundButtonMdSize;
    width: $roundButtonMdSize;

    .la-icon {
      max-height: $roundButtonMdSize;
      max-width: $roundButtonMdSize;
    }
  }
}