@use '@cloud-ru/ds-figma-variables/build/scss/components/button.module' as btn;
@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;

$actions-counts: 1, 2;

// Резерв места под действия равен ширине icon-only кнопки — при смене плотности совпадает с реальной кнопкой.
@mixin actions-reserve {
  $width: base.simple-var(btn.$button, 'anatomy', 'size', 'm', 'container', 'iconOnly', 'min-width');

  @each $count in $actions-counts {
    &[data-visible-actions='#{$count}'] {
      padding-right: calc(#{$count} * #{$width});
    }
  }
}

.actions {
  --card-actions-surface-inset-top: #{base.$sn-primitive-dimension-4};
  --card-actions-surface-inset-right: #{base.$sn-primitive-dimension-4};

  // В Figma панель вынесена из потока и не растит строку заголовка; место под неё резервирует actions-reserve.
  &[data-actions-visibility='always'] {
    position: absolute;
    top: var(--card-actions-surface-inset-top);
    right: var(--card-actions-surface-inset-right);
  }
}

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

  width: 100%;
  min-width: 0;

  &[data-actions-visibility='always'] {
    @include actions-reserve;
  }
}

.root {
  cursor: pointer;

  position: relative;

  box-sizing: border-box;
  width: 100%;
  padding: 0;
  border: none;

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

  background-color: transparent;
  outline: none;

  &:hover,
  &:focus-visible,
  &:has(*:focus-visible) {
    .actions {
      visibility: visible;
    }

    .titleContainer {
      @include actions-reserve;
    }
  }
}

.container {
  display: flex;
  gap: base.$sn-primitive-dimension-4;
  align-items: flex-start;

  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: base.$sn-density-spacing-interval-s;
}

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

.textContent {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;

  min-width: 0;

  text-align: left;
}

.titleRow {
  display: flex;
  gap: base.$sn-primitive-dimension-4;
  align-items: center;
  justify-content: space-between;

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

.title {
  overflow: hidden;
  display: block;
  flex-shrink: 1;

  min-width: 0;

  color: base.$sn-theme-color-available-version-textMain;
}

.description {
  width: 100%;
  color: base.$sn-theme-color-available-version-textTertiary;
}