@import "buttons-api";
.#{$eps-prefix}button {
display: inline-flex;
//custom properties
@include button-custom-properties;
// definitions
color: var(--button-background-color, currentColor);
font-size: var(--button-font-size, inherit);
font-weight: $button-font-weight;
line-height: var(--button-line-height);
cursor: pointer;
&:active {
--button-background-color: var(--button-active-background-color, transparent);
}
&:hover {
--button-background-color: var(--button-hover-background-color);
}
.eps-theme-dark & {
//dark custom properties
@include button-dark-custom-properties;
}
// Variants
&--contained {
// definitions
color: var(--button-color);
padding: var(--button-padding-y) var(--button-padding-x);
background-color: var(--button-background-color, transparent);
border: $eps-border-width $eps-border-style var(--button-background-color);
&:hover {
color: var(--button-color);
}
}
&--outlined {
display: block;
padding: var(--button-padding-y) var(--button-padding-x);
border: $eps-border-width $eps-border-style var(--button-background-color);
}
&--contained,
&--outlined {
border-radius: $button-border-radius;
}
&--underlined {
text-decoration: underline;
}
// Sizes
&--sm {
--button-font-size: #{$button-sm-font-size};
--button-line-height: #{$button-sm-line-height};
}
&--lg {
--button-font-size: #{$button-lg-font-size};
--button-line-height: #{$button-lg-line-height};
}
// Colors
&--primary {
--button-color: var(--button-primary-color);
--button-background-color: var(--button-primary-background-color);
--button-hover-background-color: var(--button-primary-hover-background-color);
--button-active-background-color: var(--button-primary-active-background-color);
}
&--secondary {
--button-color: var(--button-secondary-color);
--button-background-color: var(--button-secondary-background-color);
--button-hover-background-color: var(--button-secondary-hover-background-color);
--button-active-background-color: var(--button-secondary-active-background-color);
}
&--danger {
--button-color: var(--button-danger-color);
--button-background-color: var(--button-danger-background-color);
--button-hover-background-color: var(--button-danger-hover-background-color);
--button-active-background-color: var(--button-danger-active-background-color);
}
&--cta {
--button-color: var(--button-cta-color);
--button-background-color: var(--button-cta-background-color);
--button-hover-background-color: var(--button-cta-hover-background-color);
--button-active-background-color: var(--button-cta-active-background-color);
}
&--link {
--button-color: var(--button-link-color);
--button-background-color: var(--button-link-background-color);
--button-hover-background-color: var(--button-link-hover-background-color);
--button-active-background-color: var(--button-link-active-background-color);
}
&--disabled,
&[disabled] {
--button-color: var(--button-disabled-color);
--button-background-color: var(--button-disabled-background-color);
--button-hover-background-color: var(--button-disabled-hover-background-color);
--button-active-background-color: var(--button-disabled-active-background-color);
cursor: default;
}
}