$button-large: em(20px);
$button-medium: em(20px);
$button-small: em(16px);

$button-text-sizes: (
    'large': $button-large,
    'medium': $button-medium,
    'small': $button-small
);

$sizes: (
  'extra-small': 34px,
  'small': 44px,
  'medium': 48px,
  'large': 56px,
);

@function size($name: 'small') {
  @return map-get($sizes, $name);
}

@mixin button($size: 'small') {
    @include height-modifiers();
    @include align-items-center();
    @include justify-content-center();
    @include flex();
    @include font("IntervalNextReg");
    min-width: 130px;
    height: size(#{$size});
    padding: 0 22px;
    max-width: 180px;
    background-color: transparent;
    border-radius: 2px;
    border: none;
    outline: none;
    will-change: background-color;
    font-size: map-get($button-text-sizes, $size);
    text-align: center;
    color: color('primary');

    &:hover {
        cursor: pointer;
    }

    &--primary {
        text-align: center;
        background-color: color('primary');
        color: color('text', 'highlight');

        &:active {
            background-color: color('buttons', 'pressed');
        }
    }

    &--secondary {
        text-align: center;
        border: 2px solid color('primary');
    }

    &--alternative {
        text-align: center;
        background-color: color('buttons', 'alternative');
        color: color('text', 'highlight');
    }

    &--link {
        @include justify-content-start();
        padding: 0;
        background-color: transparent;
        text-decoration: underline;
        text-align: left;
        color: color('primary');
    }

    &--full-width {
        max-width: 100%;
        width: 100%;
        max-width: initial;
    }

    &--large {
        font-size: map-get($button-text-sizes, 'large');
    }

    &--medium {
        font-size: map-get($button-text-sizes, 'medium');
    }

    &--small {
        font-size: map-get($button-text-sizes, 'small');
    }

    &--disabled {
        background-color: color('buttons', 'disabled');
        color: color('buttons', 'disabled-text');
        cursor: initial;
        pointer-events: none;
        border: 0;
    }
}

@mixin button-text() {
    font-size: $button-large;
    text-align: center;
}