@use "variables" as *;
@use "../../core/mixins/focus" as *;

.dialogue-tree {
    margin: 0 0 var(--f-margin-component-bottom);

    &__list {
        margin-left: 0;
        padding-left: 0;
        list-style-type: none;
        border-radius: 2px;
        &-item:has(:focus-visible) {
            z-index: 2;
            @include focus-indicator;
            &:not(:first-child) {
                border-top: 1px solid $dialogue-tree-color-border-default;
            }
        }

        &-item {
            background-color: $dialogue-tree-color-background-default;
            border-bottom: 1px solid $dialogue-tree-color-border-default;
            border-left: 1px solid $dialogue-tree-color-border-default;
            border-right: 1px solid $dialogue-tree-color-border-default;
            border-top: 1px solid transparent;
            height: 60px;
            position: relative; // Viktigt för att kunna styra fokus-ramen
            box-sizing: border-box;
            &:first-child {
                border-top: 1px solid $dialogue-tree-color-border-default;
            }

            @media (hover: hover) {
                // .is-hover only for screenshot selector
                &.is-hover,
                &:hover {
                    background-color: $dialogue-tree-color-background-hover;
                    z-index: 1;
                }
            }

            button:focus-visible {
                box-shadow: none;
            }

            button {
                padding: 0 0.75em;
                border: 0;
                width: 100%;
                height: 100%;
                background-color: inherit;
                color: $dialogue-tree-color-text-default;
                display: flex;
                align-items: center;
                outline: none;
                justify-content: space-between;
                cursor: pointer;

                span {
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    font-weight: var(--f-font-weight-medium);
                    font-size: var(--f-font-size-standard);
                    text-align: left;
                }

                .icon {
                    flex-shrink: 0;
                    margin-left: 1.25rem;
                }
            }
        }
    }
}