@import '../../global';
@import '../../mixins/actionable.scss';

.button {
  @include actionable;
  width: auto;
  height: 52px;

  display: inline-flex;
  justify-content: center;
  align-items: center;

  white-space: nowrap;

  cursor: pointer;

  &.loading &_content {
    display: none;
  }

  &:focus {
    box-shadow: 0 0 0 4px #ffffff, 0 0 0 5px #717171,
      0 0 0 6px rgba(255, 255, 255, 0.5);
    transition: box-shadow 0.2s ease;
  }

  &_content {
    display: flex;
    justify-content: space-between;
  }
}

.small {
  font-size: $font-size-small;
  line-height: $font-line-height-small;

  height: 42px;

  padding: 10px 12px;
}

.block {
  width: 100%;
  margin-bottom: 25px;
}

.primary {
  border-color: color('primary');
  background-color: color('primary');
  color: color('white');
}

.secondary {
  color: color('black');
  border-color: color('gray');
  background-color: color('white');
}

.clear {
  border: none;
  border-radius: none;
  color: color('black');
  background-color: transparent !important;
}

.inverse {
  color: color('white');
  border-color: color('white');
  background-color: transparent;
}