.tiny-datepicker {

    max-width: fit-content;

    &__week {
        display: flex;
    }

    &__date {
        font-weight: bold;
        margin: 0 0 0.75em;
        text-align: center;
    }

    &__days {
        min-height: 200px;
    }

    &__day {
        width: 100%;
        text-align: center;
        border: 1px solid transparent;

        &:hover {
            background-color: $color__active;
            cursor: pointer;
        }

        &--current {
            border: 1px solid $color__border;
        }

        &--not-current {
            opacity: 0.5;
        }

        &--header {
            &:hover {
                background-color: transparent;
                cursor: auto;
            }
        }
    }

    &__select {
        display: flex;
        align-items: center;

        input.field-text, select.field-choice {
            margin: 0 0.5em 0 0.5em;
            padding: 0.55em 1em;
        }

        select.field-choice {
            width: calc(100% - 1em);
        }

        input.field-text {
            width: auto;
        }
    }

    &__label {
        text-align: center;
        width: 100%;
    }

    &__button {
        padding: 0.5em 0.75em;
    }   
}