@use '~flux/components/css/mixin';

.item {
    display: flex;
    flex-flow: row nowrap;
    gap: 18px;
    text-align: left;
}

.item.isControl {
    cursor: pointer;
    user-select: none;
    transition: background-color .15s var(--swift-out);

    @include mixin.hover {
        background-color: var(--surface-hover);
    }
}

.itemActions {
    flex-shrink: 0;
}

.itemContent {
    display: flex;
    flex-flow: column;
    flex-grow: 1;
    gap: 3px;
}

.itemMedia {
    --size: 48px;

    flex-shrink: 0;
}

.itemMedia > img {
    height: var(--size);
    width: var(--size);
    object-fit: cover;
    object-position: center;
}

.itemMedia > .avatar {
    font-size: var(--size);
}

.itemMedia > .icon {
    margin: 1px;
    font-size: 20px;
}

.itemMedia > .iconBoxed {
    font-size: var(--size);
}

.itemActions.isCenter,
.itemContent.isCenter,
.itemMedia.isCenter {
    align-self: center;
}

.itemStack {
    position: relative;

    .item + .item {
        margin-top: 18px;
        padding-top: 18px;
        border-top: 1px solid var(--surface-stroke);
    }
}

.basePaneStructure > .item,
.basePaneStructure > .itemStack > .item {
    padding: 18px;
}

.basePaneStructure > .itemStack > .item {
    margin: 0;
}

// An is-control item paints a hover background, so round its outer corners to follow the parent
// pane. Content sits inside the pane's 1px border, hence `--radius - 1px`. A lone item rounds all
// corners; within a stack only the first item's top and the last item's bottom round.
.basePaneStructure > .item.isControl {
    border-radius: calc(var(--radius) - 1px);
}

.basePaneStructure > .itemStack > .item.isControl {
    border-radius: 0;

    &:first-child {
        border-top-left-radius: calc(var(--radius) - 1px);
        border-top-right-radius: calc(var(--radius) - 1px);
    }

    &:last-child {
        border-bottom-left-radius: calc(var(--radius) - 1px);
        border-bottom-right-radius: calc(var(--radius) - 1px);
    }
}

.basePaneStructure:is(a, button) {
    @include mixin.hover {
        &:has(> .item) {
            background-color: color-mix(in srgb, rgb(from var(--surface-hover) r g b / .125), var(--surface));
        }
    }
}