@import "../../styles/config";

.timepicker-dial {
    text-align: right;

    &__container {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    &__time {
        display: flex;
        align-items: baseline;
        line-height: normal;
        font-size: 50px;
        color: $dial-inactive-color;
        font-family: $primary-font-family;
        @supports (font-family: var(--primary-font-family)) {
            font-family: var(--primary-font-family);
            color: var(--dial-inactive-color);
        }
    }

    &__period {
        display: block;
        margin-left: 10px;

        &--hidden {
            visibility: hidden;
        }
    }

    &__hint-container {
        &--hidden {
            visibility: hidden;
        }
    }

    &__hint {
        display: inline-block;
        font-size: 10px;
        color: $dial-active-color;
        @supports (color: var(--dial-active-color)) {
            color: var(--dial-active-color);
        }

        span {
            font-size: 14px;
        }
    }

}

@media (max-device-width: 1023px) and (orientation: landscape) {
    .timepicker-dial {
        &__container {
            flex-direction: column;
        }

        &__period {
            margin-left: 0;
        }
    }
}
