@use 'styles/settings.scss' as s;

.time-field {
    position: relative;
    margin: 20px 0;
    display: flex;
    align-items: baseline;
    border-radius: 15px;
    color: s.$text;
    background: s.$background-light;

    .formatted {
        flex: 0 0 auto;
        content: 'min';
        min-width: 75px;
        white-space: nowrap;
        text-align: center;
    }

    label {
        &:after {
            content: ' *';
            color: s.$primary;
        }

        font-size: 16px;
        position: absolute;
        left: 20px;
        font-weight: s.$weight-bold;
        z-index: 20;
        transform: translateY(-50%);
    }
}