/*------------------------------------*\
    CATEGORY ITEM
    Navigation elements for different levels of category navigation. Includes classes for layout of these elements in a list.
\*------------------------------------*/

@use "../../base/helpers";
@use "../../base/settings";

// modifiable vars
$category-item__border-colour--hover: settings.$ds_colour__link--hover !default;
$category-item__link-colour: settings.$ds_colour__link !default;

$border-width-size: 0.25rem;

.ds_category-item {
    @include helpers.ds_link--block('.ds_category-item__link');

    margin: 0;
    padding: 0.75rem 1rem 0.75rem;
    text-decoration: none;
    transition: background-color settings.$transition-out-time, border-color settings.$transition-out-time;
    width: 100%;

    @include helpers.ds_last-child-no-margin;

    &__title {
        @include helpers.ds_large-size;
        line-height: 1.75rem;
        margin: 0 0 1rem;
    }

    .ds_category-item__link::after {
        left: #{$border-width-size * -1};
    }

    &__link {
        color: $category-item__link-colour;

        &::before {
            border-left: $border-width-size solid settings.$ds_colour__border--highlight;
            bottom: 0;
            content: '';
            left: #{$border-width-size * -1};
            opacity: 0.3;
            position: absolute;
            top: 0;
            width: $border-width-size;
        }

        &:focus {
            outline-width: 0;
        }

        &:focus::before {
            content: none;
        }

        &:hover::before {
            border-color: $category-item__border-colour--hover;
            opacity: 1;
        }

        &::after {
            background: transparent;
            bottom: 0;
            content: '';
            left: 0;
            position: absolute;
            right: 0;
            top: 0;
        }
    }

    &__summary {
        @include helpers.ds_small-size;
        color: settings.$ds_colour__text--secondary;
        line-height: 1.5rem;
        margin: 0;
    }

    &:hover &__summary,
    &:focus-within &__summary {
        color: settings.$ds_colour__text;
    }
}

// DEPRECATED - use cards standalone and not as a category item
.ds_card {
    > .ds_category-item {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
        position: static;
    }

    .ds_category-item__link::before {
        border-width: 0;
    }
}

@include helpers.ds_media-query(medium) {
    .ds_category-item {
        &__title {
            line-height: 2rem;
        }
    }

    // DEPRECATED - use cards standalone and not as a category item
    .ds_card {
        > .ds_category-item {
            min-height: 12.5rem;
        }
    }
}