@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
@use '@cloud-ru/ds-materials' as m;

.stateLayer {
  visibility: initial;
}

// `actionsVisibility='hover'` уже красится `position: absolute` в самом CardActionsSurface —
// эта заливка не задевает. Для `actionsVisibility='always'` (мобильный вид) surface остаётся
// `position: static`: чтобы он, как и `.container`, не рисовался под `.stateLayer`, тоже нужен
// позиционированный брат.
.cardActions {
  // В Figma панель стоит внутри container с gap 8 и без правого отступа: 4 от container + 4 здесь.
  margin-left: base.$sn-primitive-dimension-4;

  &[data-actions-visibility='always'] {
    position: relative;
  }
}

.root {
  cursor: pointer;

  position: relative;

  display: flex;
  align-items: center;

  box-sizing: border-box;
  width: 100%;
  padding: 0;
  border: none;
  border-radius: base.$sn-density-radius-3xs;

  font: inherit;
  color: inherit;
  text-decoration: none;

  background-color: transparent;

  &[data-disabled] {
    pointer-events: none;
    cursor: default;
    opacity: base.$sn-theme-effect-opacity-disabled;

    .stateLayer {
      visibility: hidden;
    }
  }

  &:focus-visible {
    outline: base.$sn-theme-color-primary-accent solid base.$sn-primitive-strokeWeight-strokeSemiBold;
    outline-offset: calc(-1 * #{base.$sn-primitive-strokeWeight-strokeSemiBold});
  }

  &:not([data-disabled]):hover,
  &:not([data-disabled]):focus-visible,
  &:not([data-disabled])[data-tooltip-open],
  &:not([data-disabled]):has(*:focus-visible) {
    .cardActions {
      position: relative;
      visibility: visible;
    }
  }

  @include m.has-state-layer-as-child('stateLayer');
}

.container {
  position: relative;

  display: flex;
  gap: base.$sn-primitive-dimension-8;
  align-items: center;

  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: base.$sn-density-size-m;
  padding: 0 base.$sn-primitive-dimension-4;
  border-radius: inherit;
}

.icon {
  flex-shrink: 0;
  width: base.$sn-density-icon-s;
  height: base.$sn-density-icon-s;
  color: base.$sn-theme-color-available-version-textTertiary;
}

.content {
  display: flex;
  flex: 1;
  gap: base.$sn-primitive-dimension-4;
  align-items: center;

  min-width: 0;
  min-height: base.$sn-primitive-dimension-24;
}

.title {
  overflow: hidden;
  display: block;

  min-width: 0;

  color: base.$sn-theme-color-available-version-textMain;
  text-overflow: ellipsis;
  white-space: nowrap;
}