.item {
    display: flex;
    align-items: center;
    height: 36px;

    &.root {
        border-bottom: solid 1px #e0e4e6;
    }

    &.selected {
        background-color: #bae7ff;

        .title {
            font-weight: bold;
        }
    }

    &.over {
        border: red;
    }

    &.no-switcher-indent {
        margin-inline-start: 12px;
    }

    &:hover .actions-wrapper {
        visibility: visible;
    }

    .switcher {
        display: inline-flex !important;
        font-size: 60%;
        transition: transform 0.3s ease-in-out;
        transform: rotate(0);
        width: 12px;
        cursor: pointer;

        &.expanded {
            transform: rotate(90deg);
        }
    }

    .icon {
        height: 20px;
    }

    .title-wrapper {
        display: flex;
        flex-grow: 1;

        .icon {
            padding-inline-end: 4px;
        }

        .title {
            font-size: 14px;
            text-transform: capitalize;
            color: #313131;
        }
    }

    .actions-wrapper {
        display: flex;
        justify-self: end;
        padding-inline-end: 8px;
        visibility: hidden;

        .icon {
            cursor: pointer;
        }

        .icon:hover {
            opacity: 0.8;
        }
    }
}