toggle-corp/react-store

%button {
    outline: none;
    border: 0;
    background-color: transparent;
    cursor: pointer;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
}

.day-picker {
    .header {
        display: flex;
        flex-wrap: wrap;
        width: 100%;

        button {
            border-radius: 0;
            padding: var(--spacing-small) var(--spacing-small-alt);

            &:hover {
                background-color: var(--color-background-hover);
            }
        }

        .left,
        .right {
            flex-shrink: 0;
            background-color: var(--color-background-header);
        }

        .month {
            flex-grow: 1;
            background-color: var(--color-background-header);
            text-transform: none;
        }

        .days {
            display: flex;
            flex-basis: 100%;
            // background-color: var(--color-background-header-alt);
            padding: var(--spacing-extra-small) 0;

            > span {
                flex-grow: 1;
                text-align: center;
                font-size: var(--font-size-small);
            }
        }
    }

    .weeks {
        display: table;
        flex-basis: 100%;
        width: 100%;

        .week {
            display: table-row;

            .day {
                display: table-cell;

                button {
                    border: var(--width-separator-thin) solid transparent;
                    border-radius: 0;
                    padding: var(--spacing-small);
                    width: 100%;
                    height: 100%;

                    &:hover {
                        // border-color: var(--color-separator-alt);
                        background-color: var(--color-background-hover);
                    }
                }

                &.highlighted {
                    button {
                        color: var(--color-primary);
                    }
                }

                &.selected {
                    button {
                        border-color: var(--color-accent);
                        color: var(--color-accent);
                    }
                }
            }
        }
    }
}