@use "../../shared/option/styles/option.mixin";
@use "../../styles/variables";

.thy-list {
    display: block;
    overflow: auto;
    flex: 1 1 auto;
    padding: 2px 0px;
    &-divided {
        .thy-list-item {
            border-bottom: variables.$thy-list-item-border-bottom;
        }
    }
}

.thy-list-option,
.thy-list-item {
    padding: variables.$list-item-padding;
    @include option.thy-option-common-layout();

    &.cdk-drag,
    &.thy-sortable-item {
        .cdk-drag-handle,
        .thy-sortable-handle,
        .drag-handle {
            padding: 0px 5px 0 4px;
            margin-left: -20px;
        }
    }
}

.thy-list-option {
    @include option.thy-option($color: variables.$gray-800);
}

.thy-list-item {
    @include option.thy-option(variables.$gray-100, variables.$gray-800);
}

.thy-multiple-selection-list {
    .thy-list-option {
        @include option.thy-multiple-option();
    }
}

.thy-grid-list {
    display: flex;
    flex-wrap: wrap;
    padding: 10px 0 0 10px;
    @include option.thy-grid-option();
}

.thy-list-sm {
    @include option.thy-grid-option-sm();
}

.thy-list-item-meta {
    display: flex;
    flex: 1;
    align-items: center;
    padding: variables.$list-item-meta-padding;
    .thy-list-item-meta-content {
        flex: 1;
        margin-left: variables.$thy-list-item-meta-content-margin-left;
        .thy-list-item-meta-title {
            font-size: variables.$thy-list-item-meta-title-font-size;
            color: variables.$gray-800;
        }
        .thy-list-item-meta-description {
            margin-top: variables.$thy-list-item-meta-description-margin-top;
            color: variables.$gray-600;
        }
    }
}
