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

.root {
  display: flex;
  flex-direction: column;

  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

.header {
  display: flex;
  gap: base.$sn-primitive-dimension-40;
  align-items: flex-start;
  justify-content: space-between;

  box-sizing: border-box;
  width: 100%;
  padding: base.$sn-density-spacing-interval-s base.$sn-density-spacing-interval-l;
  // Разделитель на available/borderColor (Figma), не neutral/decor.
  border-bottom: base.$sn-primitive-strokeWeight-strokeRegular solid base.$sn-theme-color-available-borderColor;

  background-color: base.$sn-theme-color-neutral-background;
}

.description {
  color: base.$sn-theme-color-available-version-textSecondary;
}

.body {
  display: flex;
  gap: base.$sn-density-spacing-interval-m;

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

.sidebar {
  height: max-content;
  padding: base.$sn-primitive-dimension-16;
  border-radius: base.$sn-brand-anatomy-radius-block-m;
  background: base.$sn-theme-color-neutral-background1Level;
}

.main {
  box-sizing: border-box;
  width: 100%;
  padding-top: base.$sn-density-spacing-interval-l;
}

.titleWrapper {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: base.$sn-primitive-dimension-8 base.$sn-primitive-dimension-16;
  align-items: center;

  min-width: 0;
}

.headerActions {
  display: flex;
  flex-shrink: 0;
  gap: base.$sn-primitive-dimension-8;
  align-items: center;
}

.titleInner {
  display: flex;
  gap: base.$sn-primitive-dimension-8;
}

.title {
  box-sizing: border-box;
  max-width: 100%;
  margin: 0;
  padding: 0;

  color: base.$sn-theme-color-available-version-textMain;
  overflow-wrap: break-word;
}

.innerElement {
  display: flex;
  align-items: center;
  justify-content: center;
  height: base.$sn-regular-title-l-lineHeight;
}

.icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;

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

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