toggle-corp/react-store

.year-picker {
    display: flex;
    flex-direction: column;
    height: 100%;

    .header {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        justify-content: center;
        background-color: var(--color-background-header);

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

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

        .left,
        .right, {
            flex-shrink: 0;
        }

        .title {
            flex-grow: 1;
        }
    }

    .years {
        display: flex;
        align-items: stretch;
        flex-grow: 1;
        flex-wrap: wrap;
        padding: var(--spacing-extra-small);
        overflow: auto;

        .year {
            flex-basis: calc(100% / 3);
            border: var(--width-separator-thin) solid transparent;
            border-radius: 0;
            padding: 0;

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

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