@import url("@arc-ui/tokens-arc/dist/custom-media.css");

.link-tile {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 306px;
  height: 144px;
  min-height: 144px;
  max-height: 144px;
  border: var(--sem-border-width-xxs) solid
    var(--sem-color-border-secondary-light-minimal);
  border-radius: var(--sem-border-radius-xl);
  padding: var(--sem-space-padding-110) var(--sem-space-padding-70)
    var(--sem-space-padding-110) var(--sem-space-padding-110);
  background: var(--sem-color-bg-secondary-light-default);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s ease;
  flex: none;
  align-self: stretch;
  position: relative;
  overflow: hidden;
  flex-grow: 1;
}

.link-tile-content {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: var(--sem-space-padding-40);
  width: 100%;
  min-height: 48px;
  flex: none;
  align-self: stretch;
}

.link-tile-icon {
  display: flex;
  width: 32px;
  height: 32px;
  color: var(--sem-color-fg-primary-light-default);
  transition: color 0.2s ease;
  flex: none;
  flex-shrink: 0;
  order: 1;
}

.link-tile-text {
  font-family: var(--sem-font-family-heading);
  font-size: var(--sem-font-size-100);
  font-weight: var(--sem-font-weight-semi);
  line-height: var(--sem-line-height-base-scale-xs);
  letter-spacing: 0;
  color: var(--sem-color-fg-primary-light-default);
  transition: color 0.2s ease;
  flex: 1;
  order: 0;
}

.link-tile--neutral .link-tile-text,
.link-tile--neutral .link-tile-icon {
  color: var(--sem-color-fg-secondary-light-default);
}

.link-tile-icon svg,
.link-tile .link-tile-content svg {
  color: inherit;
  transition: color 0.2s ease;
}

.link-tile:not(:has(svg)) {
  padding: var(--sem-space-padding-110);
}

.link-tile:active {
  border-radius: var(--sem-border-radius-xl);
}

@media (--arc-custom-media-min-width-l-px) {
  .link-tile {
    padding: var(--sem-space-padding-110) var(--sem-space-padding-70)
      var(--sem-space-padding-110) var(--sem-space-padding-110);
  }
}

.link-tile:hover {
  border-color: transparent;
  box-shadow: inset 0 0 0 2px var(--button-v2-colors-light-text-hover);
}

.link-tile:hover .link-tile-text {
  color: var(--button-v2-colors-light-text-hover);
}

.link-tile:hover .link-tile-icon {
  color: var(--button-v2-colors-light-text-hover);
}