@use "variables" as *;

:host {
    box-sizing: border-box;
    display: flex;
    gap: $dot-editor-size;
    padding: (0.25 * $dot-editor-size) (0.5 * $dot-editor-size);
    background-color: $white;
    cursor: pointer;
    align-items: center;

    * {
        pointer-events: none;
    }

    &[disabled="true"] {
        color: $color-palette-gray-500;
        cursor: not-allowed;
    }
}

.icon-wrapper {
    align-items: center;
    border: solid 1px lightgrey;
    display: flex;
    flex-basis: 2 * $dot-editor-size;
    flex-shrink: 0;
    height: 2 * $dot-editor-size;
    justify-content: center;
    width: 2 * $dot-editor-size;

    dot-contentlet-thumbnail {
        align-items: center;
        display: block;
        position: relative;
        width: 2.625 * $dot-editor-size;
        height: 2.625 * $dot-editor-size;
    }

    &.dot-contentlet {
        width: 2.625 * $dot-editor-size;
        height: 2.625 * $dot-editor-size;
        flex-basis: 2.625 * $dot-editor-size;
    }

    &.page {
        &,
        dot-contentlet-thumbnail {
            flex-basis: 4 * $dot-editor-size;
            height: 4 * $dot-editor-size;
            width: 4 * $dot-editor-size;
        }
    }
}

.data-wrapper {
    overflow: hidden;

    > span {
        overflow: hidden;
        display: block;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-bottom: 4px;
    }

    .url {
        color: $color-palette-gray-500;
        font-size: 0.9 * $dot-editor-size;
    }

    .state {
        margin-top: (0.5 * $dot-editor-size);
        display: flex;
        align-items: flex-end;

        dot-state-icon {
            margin-right: (0.5 * $dot-editor-size);
        }
    }
}
