/* src/tile/src/Tile.css */
.o-ui-tile {
  --o-ui-tile-checmark-size: 1.5rem;
  width: 100%;
  min-width: 100px;
  border: none;
  background-color: var(--hop-neutral-surface);
  padding: 0;
  color: var(--hop-neutral-text);
  border-radius: var(--hop-shape-rounded-md);
  display: grid;
  transition: all var(--o-ui-easing-duration-2) var(--o-ui-easing-focus);
  position: relative;
  cursor: pointer;
  font-family: inherit;
}
.o-ui-tile::before {
  border: 1px solid var(--hop-neutral-border-strong);
  content: "";
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  display: block;
  position: absolute;
  border-radius: inherit;
}
.o-ui-tile-heading {
  display: block;
  padding-right: var(--hop-space-inset-md);
}
.o-ui-tile .o-ui-tile-heading {
  margin-bottom: var(--hop-space-stack-md);
}
.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(--hop-neutral-surface-hover);
}
.o-ui-tile:after {
  opacity: 0;
  content: "";
  inset: -3px;
  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;
}
.o-ui-tile[aria-checked=true]::before,
.o-ui-tile[aria-pressed=true]::before {
  border-color: var(--hop-neutral-border-selected);
  border-width: 2px;
}
.o-ui-tile-checkmark {
  position: absolute;
  width: var(--o-ui-tile-checmark-size);
  aspect-ratio: 1/1;
  z-index: 1;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  border-radius: var(--hop-shape-circle);
  fill: var(--hop-neutral-icon);
}
.o-ui-tile[aria-checked=true] .o-ui-tile-checkmark,
.o-ui-tile[aria-pressed=true] .o-ui-tile-checkmark {
  opacity: 1;
}
.o-ui-tile[disabled] {
  background-color: var(--hop-neutral-surface-disabled);
  color: var(--hop-neutral-text-disabled);
  cursor: not-allowed;
}
.o-ui-tile[disabled]::before {
  border-color: var(--hop-neutral-surface-disabled);
}
.o-ui-tile[disabled].o-ui-tile[aria-checked=true]::before,
.o-ui-tile[disabled].o-ui-tile[aria-pressed=true]::before {
  border-color: var(--hop-neutral-border-disabled);
}
.o-ui-tile[disabled] .o-ui-tile-checkmark {
  fill: var(--hop-neutral-icon-disabled);
}
.o-ui-tile-thumbnail {
  align-self: stretch;
}
.o-ui-tile-vertical .o-ui-tile-thumbnail {
  border-top-left-radius: calc(var(--hop-shape-rounded-md) - 1px);
  border-top-right-radius: calc(var(--hop-shape-rounded-md) - 1px);
}
.o-ui-tile-horizontal .o-ui-tile-thumbnail {
  border-top-left-radius: calc(var(--hop-shape-rounded-md) - 1px);
  border-bottom-left-radius: calc(var(--hop-shape-rounded-md) - 1px);
}
.o-ui-tile-image {
  width: 100%;
  grid-area: image;
}
.o-ui-tile-vertical .o-ui-tile-image {
  border-top-left-radius: calc(var(--hop-shape-rounded-md) - 1px);
  border-top-right-radius: calc(var(--hop-shape-rounded-md) - 1px);
}
.o-ui-tile-horizontal .o-ui-tile-image {
  border-top-left-radius: calc(var(--hop-shape-rounded-md) - 1px);
  border-bottom-left-radius: calc(var(--hop-shape-rounded-md) - 1px);
}
.o-ui-tile-illustration {
  padding: var(--hop-space-inset-md);
}
.o-ui-tile-vertical .o-ui-tile-illustration {
  border-top-left-radius: calc(var(--hop-shape-rounded-md) - 1px);
  border-top-right-radius: calc(var(--hop-shape-rounded-md) - 1px);
}
.o-ui-tile-horizontal .o-ui-tile-illustration {
  border-top-left-radius: calc(var(--hop-shape-rounded-md) - 1px);
  border-bottom-left-radius: calc(var(--hop-shape-rounded-md) - 1px);
}
.o-ui-tile-main {
  align-self: stretch;
  position: relative;
  padding: var(--hop-space-inset-md) calc(var(--hop-space-inset-md) + var(--o-ui-tile-checmark-size)) var(--hop-space-inset-md) var(--hop-space-inset-md);
  grid-area: aside;
  display: flex;
  flex-direction: column;
  text-align: left;
}
.o-ui-tile-thumbnail + .o-ui-tile-main {
  padding: var(--hop-space-inset-md) calc(var(--hop-space-inset-md) + var(--o-ui-tile-checmark-size)) var(--hop-space-inset-lg) var(--hop-space-inset-lg);
}
.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;
}
.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;
}