GS13/tgui-next/packages/tgui/styles/components/Section.scss

@use 'sass:color';
@use '../colors.scss';

$color-title: #ffffff !default;
$color-background: rgba(0, 0, 0, 0.33) !default;
$color-shadow: rgba(0, 0, 0, 0.5) !default;
$color-separator: colors.$primary !default;

.Section {
  position: relative;
  margin-bottom: 6px;
  // IE8: Does not support rgba colors
  background-color: color.adjust(
    $color-background,
    $lightness: 10%,
    $alpha: 1);
  background-color: $color-background;
  box-shadow: inset 0 0 5px $color-shadow;
  box-sizing: border-box;

  &:last-child {
    margin-bottom: 0;
  }
}

.Section__title {
  position: relative;
  padding: 6px;
  border-bottom: 2px solid $color-separator;
}

.Section__titleText {
  font-size: 14px;
  font-weight: bold;
}

.Section__buttons {
  position: absolute;
  display: inline-block;
  right: 6px;
  margin-top: -1px;
}

.Section__content {
  padding: 8px 6px;
}

.Section--level--1 .Section__titleText {
  font-size: 14px;
}

.Section--level--2 .Section__titleText {
  font-size: 13px;
}

.Section--level--3 .Section__titleText {
  font-size: 12px;
}

.Section--level--2,
.Section--level--3 {
  background-color: transparent;
  box-shadow: none;
  margin-left: -6px;
  margin-right: -6px;
}