button {
    --icon-spacing: var(--spacingHorizontalSNudge);
    position: relative;
    /*contain: layout style;*/
    vertical-align: middle;
    align-items: center;
    box-sizing: border-box;
    justify-content: center;
    text-align: center;
    text-decoration-line: none;
    margin: 0px;
    min-height: 32px;
    outline-style: none;
    background-color: var(--colorNeutralBackground1);
    color: var(--colorNeutralForeground1);
    border: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
    padding: 0 var(--spacingHorizontalM);
    min-width: 96px;
    border-radius: var(--borderRadiusMedium);
    font-size: var(--fontSizeBase300);
    font-family: var(--fontFamilyBase);
    font-weight: var(--fontWeightSemibold);
    line-height: var(--lineHeightBase300);
    transition-duration: var(--durationFaster);
    transition-property: background, border, color;
    transition-timing-function: var(--curveEasyEase);
    cursor: pointer;
    user-select: none;

    &:hover {
        background-color: var(--colorNeutralBackground1Hover);
        color: var(--colorNeutralForeground1Hover);
        border-color: var(--colorNeutralStroke1Hover);
    }
    &:hover:active {
        background-color: var(--colorNeutralBackground1Pressed);
        border-color: var(--colorNeutralStroke1Pressed);
        color: var(--colorNeutralForeground1Pressed);
        outline-style: none;
    }
    &:focus-visible {
        border-color: var(--colorTransparentStroke);
        outline: var(--strokeWidthThick) solid var(--colorTransparentStroke);
        box-shadow: var(--shadow4), 0 0 0 2px var(--colorStrokeFocus2);
    }
    &:disabled,
    &:disabled:hover {
        background-color: var(--colorNeutralBackgroundDisabled);
        border-color: var(--colorNeutralStrokeDisabled);
        color: var(--colorNeutralForegroundDisabled);
        cursor: not-allowed;
    }
}

/*Appearance*/
.button--appearance-primary {
    background-color: var(--colorBrandBackground);
    color: var(--colorNeutralForegroundOnBrand);
    border-color: transparent;

    &:hover {
        background-color: var(--colorBrandBackgroundHover);
        border-color: transparent;
        color: var(--colorNeutralForegroundOnBrand);
    }
    &:hover:active {
        background-color: var(--colorBrandBackgroundPressed);
    }
    &:focus-visible {
        border-color: var(--colorNeutralForegroundOnBrand);
        box-shadow: var(--shadow2), 0 0 0 2px var(--colorStrokeFocus2);
    }
    &:disabled,
    &:disabled:hover {
        background-color: var(--colorNeutralBackgroundDisabled);
        border-color: var(--colorNeutralStrokeDisabled);
        color: var(--colorNeutralForegroundDisabled);
        cursor: not-allowed;
        border-color: transparent;
    }
}

.button--appearance-outline {
    background-color: var(--colorTransparentBackground);

    &:hover {
        background-color: var(--colorTransparentBackgroundHover);
    }
    &:hover:active {
        background-color: var(--colorTransparentBackgroundPressed);
    }
    &:focus-visible {
        background-color: var(--colorTransparentBackground); 
    }
    &:disabled,
    &:disabled:hover {
        background-color: var(--colorTransparentBackground);
    }
}
.button--appearance-subtle {
    background-color: var(--colorSubtleBackground);
    color: var(--colorNeutralForeground2);
    border-color: transparent;

    &:hover {
        background-color: var(--colorSubtleBackgroundHover);
        color: var(--colorNeutralForeground2Hover);
        border-color: transparent;
    }
    &:hover:active {
        background-color: var(--colorSubtleBackgroundPressed);
    }
    &:focus-visible {
        outline: var(--strokeWidthThick) solid var(--colorTransparentStroke);
        box-shadow: var(--shadow4), 0 0 0 2px var(--colorStrokeFocus2);
    
    }
    &:disabled,
    &:disabled:hover {
        background-color: var(--colorTransparentBackground);
        border-color: transparent;
        color: var(--colorNeutralForegroundDisabled);
    }
}

.button--appearance-transparent {
    background-color: var(--colorTransparentBackground);
    color: var(--colorNeutralForeground2);
    border-color: transparent;

    &:hover {
        background-color: var(--colorTransparentBackgroundHover);
        color: var(--colorNeutralForeground2BrandHover);
        border-color: transparent;
    }
    &:hover:active {
        background-color: var(--colorTransparentBackgroundPressed);
        color: var(--colorNeutralForeground2BrandPressed);
    }
    &:focus-visible {
        border-color: transparent;
    }
    &:disabled,
    &:disabled:hover {
        border-color: transparent;
        background-color: var(--colorTransparentBackground);
        color: var(--colorNeutralForegroundDisabled);
    }
}
/*Shape*/
.button--shape-rounded {
   /* border-radius: var(--borderRadiusMedium); default*/
}
.button--shape-circular {
    border-radius: var(--borderRadiusCircular);
}
.button--shape-square {
    border-radius: var(--borderRadiusNone);
}

/*Size*/
.button--size-small {
    --icon-spacing: var(--spacingHorizontalXS);
    min-height: 24px;
    min-width: 64px;
    padding: 0 var(--spacingHorizontalS);
    border-radius: var(--borderRadiusSmall);
    font-size: var(--fontSizeBase200);
    line-height: var(--lineHeightBase200);
    font-weight: var(--fontWeightRegular);
}

.button--size-medium {
}

.button--size-large {
    min-height: 40px;
    border-radius: var(--borderRadiusLarge);
    padding: 0 var(--spacingHorizontalL);
    font-size: var(--fontSizeBase400);
    line-height: var(--lineHeightBase400);
}