@use './variables';

.rel-weight {
    background: transparent;

    .rel-weight-bar {
        width: 0;
        background: variables.get-color('secondary', base);
        border: 1px solid variables.get-color('secondary', base);
        color: white;
        transition: width 0.3s ease-in-out;
        padding-top: variables.$padding-base-vertical;
        padding-bottom: variables.$padding-base-vertical;
        padding-left: 16px;
        padding-right: 16px;
        font-size: variables.$font-size-base;
        line-height: variables.$line-height-base;
    }
    &.rel-weight-sm {
        .rel-weight-bar {
            padding-top: variables.$padding-small-vertical;
            padding-bottom: variables.$padding-small-vertical;
            font-size: variables.$font-size-small;
            line-height: variables.$line-height-small;
        }
    }
    &.rel-weight-lg {
        .rel-weight-bar {
            padding-top: variables.$padding-large-vertical;
            padding-bottom: variables.$padding-large-vertical;
            font-size: variables.$font-size-large;
            line-height: variables.$line-height-large;
        }
    }
}