.o-ui-tile {
    width: 100%;
    min-width: 100px;
    border: none;
    background-color: var(--o-ui-bg-alias-surface);
    padding: 0;
    color: var(--o-ui-text-alias-primary);
    border-radius: var(--o-ui-br-4);
    display: grid;
    transition: all var(--o-ui-easing-duration-2) var(--o-ui-easing-focus);
    position: relative;
    cursor: pointer;
    box-shadow: var(--o-ui-bs-alias-lifted);
    font-family: inherit;
}

.o-ui-tile::before {
    border: 1px solid transparent;
    content: "";
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    display: block;
    position: absolute;
    border-radius: inherit;
}

/* HEADING */
.o-ui-tile-heading {
    display: block;
    padding-right: var(--o-ui-sp-3);
}

.o-ui-tile .o-ui-tile-heading {
    margin-bottom: var(--o-ui-sp-4);
}

/* 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"]) {
    background-color: var(--o-ui-bg-alias-accent-faint);
}

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

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

.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-b-alias-mid-break);
}

/* CHECKED */
.o-ui-tile[aria-checked="true"],
.o-ui-tile[aria-pressed="true"] {
    background-color: var(--o-ui-bg-alias-accent-faint);
}

.o-ui-tile[aria-checked="true"]::before,
.o-ui-tile[aria-pressed="true"]::before {
    border-color: var(--o-ui-b-alias-accent-active);
}

/* CHECKED | CHECKMARK */
.o-ui-tile-checkmark {
    position: absolute;
    width: var(--o-ui-sz-3);
    height: var(--o-ui-sz-3);
    z-index: 1;
    right: 0.5rem;
    top: 0.5rem;
    fill: var(--o-ui-bg-alias-accent-faint);
    opacity: 0;
    border-radius: var(--o-ui-br-4);
    background-color: var(--o-ui-text-alias-accent);
}

.o-ui-tile[aria-checked="true"] .o-ui-tile-checkmark,
.o-ui-tile[aria-pressed="true"] .o-ui-tile-checkmark {
    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: calc(var(--o-ui-br-4) - 1px);
    border-top-right-radius: calc(var(--o-ui-br-4) - 1px);
}

.o-ui-tile-horizontal .o-ui-tile-thumbnail {
    border-top-left-radius: calc(var(--o-ui-br-4) - 1px);
    border-bottom-left-radius: calc(var(--o-ui-br-4) - 1px);
}

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

.o-ui-tile-vertical .o-ui-tile-image {
    border-top-left-radius: calc(var(--o-ui-br-4) - 1px);
    border-top-right-radius: calc(var(--o-ui-br-4) - 1px);
}

.o-ui-tile-horizontal .o-ui-tile-image {
    border-top-left-radius: calc(var(--o-ui-br-4) - 1px);
    border-bottom-left-radius: calc(var(--o-ui-br-4) - 1px);
}

/* ILLUSTRATION */
.o-ui-tile-illustration {
    padding: var(--o-ui-sp-5);
}

.o-ui-tile-vertical .o-ui-tile-illustration {
    border-top-left-radius: calc(var(--o-ui-br-4) - 1px);
    border-top-right-radius: calc(var(--o-ui-br-4) - 1px);
}

.o-ui-tile-horizontal .o-ui-tile-illustration {
    border-top-left-radius: calc(var(--o-ui-br-4) - 1px);
    border-bottom-left-radius: calc(var(--o-ui-br-4) - 1px);
}

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

.o-ui-tile-thumbnail + .o-ui-tile-main {
    padding: var(--o-ui-sp-4) var(--o-ui-sp-5) var(--o-ui-sp-5) var(--o-ui-sp-5);
}

/* 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;
}

/* LINK */
.o-ui-tile-link.o-ui-tile-vertical .o-ui-tile-illustration {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.o-ui-tile-link.o-ui-tile-horizontal .o-ui-tile-illustration {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}