portfolio/src/components/molecules/ProjectNav.module.scss

@import 'variables';

.projectNav {
    white-space: nowrap;
    overflow-y: hidden;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;

    &::-webkit-scrollbar,
    &::-moz-scrollbar {
        display: none;
    }

    &::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    &::-webkit-scrollbar-thumb {
        background: lighten($brand-grey-light, 25%);

        :global(.dark) & {
            background: lighten($body-background-color--dark, 15%);
        }
    }

    // stylelint-disable-next-line no-descending-specificity
    &::-webkit-scrollbar-track {
        background: darken($body-background-color, 2%);

        :global(.dark) & {
            background: lighten($body-background-color--dark, 2%);
        }
    }
}

.item {
    display: inline-block;
    width: 60vw;
    margin-left: $spacer;

    &:last-child {
        margin-right: $spacer * 2;
    }

    @media (min-width: $screen-xs) {
        width: 40vw;
        max-width: 500px;
        margin-left: $spacer * 2;
    }
}

.image {
    margin: 0;
    box-shadow: 0 3px 5px rgba($brand-main, 0.15),
        0 5px 16px rgba($brand-main, 0.15);

    :global(.dark) & {
        box-shadow: 0 3px 5px rgba(darken($brand-main, 20%), 0.15),
            0 5px 16px rgba(darken($brand-main, 20%), 0.15);
    }
}

.title {
    visibility: hidden;
    font-size: 0;
}

.link {
    display: block;
}