@use "sass:color";

.items-list {
    $row-height: 1.75em;
    display: grid;
    grid-column-gap: 0.5em;
    grid-row-gap: 0.2em;
    align-items: center;
    &.weapon {
        grid-template-columns: $row-height $row-height 3ch 3fr $row-height 1fr 3ch 5fr 4ch;
    }
    &.armor {
        grid-template-columns: $row-height $row-height 3ch 3fr 1fr 1fr 3ch 5fr 4ch;
    }
    &.shield {
        grid-template-columns: $row-height $row-height 3ch 3fr 3ch 5fr 4ch;
    }
    &.equipment {
        grid-template-columns: $row-height $row-height 3ch 3fr 10ch 5fr 4ch;
    }
    &.loot {
        grid-template-columns: $row-height 3ch 3fr 10ch 5fr 4ch;
    }
    &.spell {
        grid-template-columns: $row-height $row-height 2fr $row-height 1fr 1fr 1fr 1fr 4ch;
    }

    margin: 7px 0;
    padding: 0;
    overflow-y: auto;

    .item-row {
        display: contents;

        &.item-header {
            font-weight: bold;
            display: contents;
        }

        > * {
            height: $row-height;
            line-height: $row-height;
            white-space: nowrap;
        }

        .item-image {
            background-repeat: no-repeat;
            background-size: 100%;
            background-position: center;
        }

        input {
            border: 0;
            padding: 0;
            background-color: transparent;
        }

        input[type="checkbox"] {
            width: 100%;
            height: 100%;
            margin: 0px;
        }

        @include mark-invalid-or-disabled-input;
    }

    .item-description {
        overflow: hidden;
        text-overflow: ellipsis;
        :not(:first-child) {
            display: none;
        }
        > * {
            font-size: 0.75em;
            text-overflow: ellipsis;
            overflow: hidden;
            margin: 0;
        }
    }
}

.items-list-title {
    margin-top: 1em;
    margin-bottom: 0;
    padding-left: 1em;
    border-bottom: 2px groove $c-border-groove;
    font-weight: bold;
}