@use '../../variables' as *;

$border-color: rgba(var(--color-neutral-60-rgb), var(--opacity-level-light));
.root {
  position: relative;
  filter: var(--shadow-level-4);
  svg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    overflow: visible;
    pointer-events: none;
  }

  path {
    stroke: $border-color;
    stroke-width: 1px;
    fill: var(--color-neutral-10);
  }
}

.content {
  font-size: 12px;
  line-height: 1.4;
}
.default {
  .content {
    max-width: 256px;
    padding: $space-xs $space-s;
    line-height: #{$size-s - $space-xs * 2};
  }
}

.info {
  .content {
    padding: $space-s $space-m;
  }
}

.img {
  margin: -8px -8px 0 -8px;
  width: calc(16px + 100%);
  aspect-ratio: 4/3;
  object-fit: cover;
  object-position: center center;
}

.definitionTooltip:not(.noBorder) {
  border-bottom: 1px dotted var(--color-accent-40);

  &:hover {
    border-bottom-style: solid;
  }
}

.shortcut {
  font-size: 12px;
  border: 1px solid var(--color-neutral-20);

  span {
    line-height: 14px;
  }

  i {
    line-height: 14px;
    font-weight: 300;
  }
}

.tiny {
  width: 192px;
  .img {
    aspect-ratio: 192/120;
  }
}

.small {
  width: 256px;
  .img {
    aspect-ratio: 256/160;
  }
}

.base {
  width: 320px;
  .img {
    aspect-ratio: 320/200;
  }
}

.large {
  width: 384px;
  .img {
    aspect-ratio: 384/240;
  }
}