.o-ui-tile {
    width: 100%;
    min-width: 100px;
    border: 1px solid var(--o-ui-alias-border-1);
    background-color: var(--o-ui-alias-background-1);
    padding: 0;
    color: var(--o-ui-alias-text-primary);
    border-radius: var(--o-ui-shape-rounded);
    display: grid;
    transition: all var(--o-ui-easing-duration-2) var(--o-ui-easing-focus);
    position: relative;
    cursor: pointer;
    box-shadow: var(--o-ui-global-shadow-200);
}

/* HEADING */
.o-ui-tile-heading {
    display: block;
    margin-bottom: var(--o-ui-global-scale-delta);
}

/* STATES */
/* HOVER */
.o-ui-tile:not([disabled]):not([class$="-disabled"]):not([aria-checked="true"]):not([aria-pressed="true"]):hover,
.o-ui-tile-hover:not([disabled]):not([class$="-disabled"]):not([aria-checked="true"]):not([aria-pressed="true"]) {
    border-color: var(--o-ui-alias-border-1-hover);
    background-color: var(--o-ui-alias-background-6-hover);
}

/* FOCUS */
.o-ui-tile:after {
    opacity: 0;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    position: absolute;
    box-shadow: 0 0 0 var(--o-ui-focus-ring-thickness-md) var(--o-ui-focus-ring-color);
    border-radius: inherit;
    transition: var(--o-ui-focus-ring-transition);
}

.o-ui-tile:focus,
.o-ui-tile:focus-visible,
.o-ui-tile-focus {
    outline: none;
}

.o-ui-tile:focus-visible:after,
.o-ui-tile-focus:not([disabled]):after {
    opacity: 1;
}

/* ACTIVE */
.o-ui-tile:active,
.o-ui-tile-active:not([disabled]) {
    border-color: var(--o-ui-alias-border-1-active);
}

/* CHECKED */
.o-ui-tile[aria-checked="true"],
.o-ui-tile[aria-pressed="true"] {
    background-color: var(--o-ui-alias-background-6-active);
    border-color: var(--o-ui-alias-border-1-active);
}

/* CHECKED | CHECKMARK */
.o-ui-tile::before {
    content: "";
    opacity: 0;
    position: absolute;
    right: 8px;
    bottom: 8px;
    border-radius: var(--o-ui-shape-rounded);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--o-ui-alias-text-1);
    mask-image: url("~@orbit-ui/icons/dist/icon-check-circle-24.svg");
}

.o-ui-tile-checkable:hover:not([disabled]):not([aria-checked="true"]):not([aria-pressed="true"])::before {
    opacity: 0.7;
}

.o-ui-tile[aria-checked="true"]::before,
.o-ui-tile[aria-pressed="true"]::before {
    opacity: 1;
}

/* DISABLED */
.o-ui-tile[disabled] {
    opacity: var(--o-ui-disabled-opacity);
    cursor: not-allowed;
}

/* IMAGES & ILLUSTRATION */
/* THUMBNAIL */
.o-ui-tile-thumbnail {
    align-self: stretch;
}

.o-ui-tile-vertical .o-ui-tile-thumbnail {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.o-ui-tile-horizontal .o-ui-tile-thumbnail {
    border-top-left-radius: inherit;
    border-bottom-left-radius: inherit;
}

/* IMAGE */
.o-ui-tile-image {
    width: 100%;
    grid-area: image;
}

.o-ui-tile-vertical .o-ui-tile-image {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.o-ui-tile-horizontal .o-ui-tile-image {
    border-top-left-radius: inherit;
    border-bottom-left-radius: inherit;
}

/* ILLUSTRATION */
.o-ui-tile-illustration {
    padding: var(--o-ui-global-scale-echo);
}

.o-ui-tile-vertical .o-ui-tile-illustration {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.o-ui-tile-horizontal .o-ui-tile-illustration {
    border-top-left-radius: inherit;
    border-bottom-left-radius: inherit;
}

/* MAIN SECTION */
.o-ui-tile-main {
    padding: var(--o-ui-global-scale-foxtrot);
    grid-area: aside;
    display: flex;
    flex-direction: column;
    text-align: left;
}

.o-ui-tile-thumbnail + .o-ui-tile-main {
    padding: var(--o-ui-global-scale-delta) var(--o-ui-global-scale-echo) var(--o-ui-global-scale-echo) var(--o-ui-global-scale-echo);
}

/* ORIENTATIONS */
.o-ui-tile.o-ui-tile-vertical {
    align-items: start;
    grid-template-areas:
        "image"
        "aside";
    grid-template-rows: max-content auto;
}

.o-ui-tile-thumbnail.o-ui-tile-vertical {
    grid-area: image;
}

.o-ui-tile.o-ui-tile-horizontal {
    grid-template-areas: "image aside";
    grid-template-columns: max-content auto;
}