@use "variables" as *;

:host {
    width: 100%;
    display: block;
}

.theme-header__search-box {
    position: relative;
}

.theme__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.theme__item {
    align-items: center;
    background: $color-palette-gray-200;
    border-radius: $border-radius-sm;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 15rem;
    width: 15rem;
    margin: $spacing-3 $spacing-1 0;
    padding: $spacing-4 $spacing-3;
    transition: background-color 0.15s ease-in;
    justify-content: space-between;

    &.theme__item--active {
        box-shadow: 0 10px 10px #0003;
        background: $white;
    }

    .item__image {
        border-radius: $border-radius-sm;
        width: 9.28rem; // 148px
        height: 9.28rem; // 148px
    }

    .item__title {
        margin: 0;
    }
}

.theme__footer {
    display: flex;
    gap: $spacing-1;
    justify-content: flex-end;
    margin: $spacing-6 0 0;
}

::ng-deep {
    .p-dataview .p-dataview-content {
        padding-left: 0;
    }
}
