@use "../utils/helpers" as h;
@use "../utils/variables" as vars;

/* @docs */
$timepicker-font-size: h.useVar("font-size") !default;
$timepicker-color: h.useVar("font-color") !default;
$timepicker-line-height: h.useVar("line-height") !default;
$timepicker-font-weight: 600 !default;
$timepicker-box-padding: 0 calc(2 * h.useVar("control-spacer")) !default;

$timepicker-footer-padding: 0 0.5rem !default;

$timepicker-select-padding: h.useVar("control-padding-vertical")
    h.useVar("control-padding-horizontal") !default;
$timepicker-select-placeholder-opacity: h.useVar("disabled-opacity") !default;
/* @docs */

.o-timepicker {
    @include h.defineVar("timepicker-color", $timepicker-color);
    @include h.defineVar("timepicker-font-size", $timepicker-font-size);
    @include h.defineVar("timepicker-font-weight", $timepicker-font-weight);
    @include h.defineVar("timepicker-line-height", $timepicker-line-height);
    @include h.defineVar("timepicker-box-padding", $timepicker-box-padding);

    @include h.defineVar(
        "timepicker-footer-padding",
        $timepicker-footer-padding
    );

    @include h.defineVar(
        "timepicker-select-padding",
        $timepicker-select-padding
    );
    @include h.defineVar(
        "timepicker-select-placeholder-opacity",
        $timepicker-select-placeholder-opacity
    );

    font-size: h.useVar("timepicker-font-size");
    font-weight: h.useVar("timepicker-font-weight");
    line-height: h.useVar("timepicker-line-height");
    color: h.useVar("timepicker-color");

    // size variants
    @each $name, $value in vars.$sizes {
        &--#{$name} {
            @include h.defineVar(
                "timepicker-font-size",
                h.useVar("size-#{$name}")
            );
        }
    }

    &__dropdown {
        width: 100%;

        .o-dropdown__menu {
            min-width: 12rem;
        }
    }

    &__box {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: h.useVar("timepicker-box-padding");
    }

    &__select {
        // remove default appearance
        @include h.removeAppearance;
        // add clickable cursor
        @include h.clickable;

        display: inline-block;
        position: relative;
        vertical-align: top;
        justify-content: flex-start;
        align-items: center;
        border: 0;

        font-size: inherit;
        font-weight: inherit;
        line-height: inherit;
        color: inherit;

        padding: h.useVar("timepicker-select-padding");
    }

    &__select-placeholder {
        opacity: h.useVar("timepicker-select-placeholder-opacity");
    }

    &__footer {
        padding: h.useVar("timepicker-header-padding");
    }
}