@use "sass:color";
@use "../base";
@use "../colors";
@use "../functions";

$title-text-color: base.$color-fg !default;
$background-color: base.$color-bg-section !default;
$separator-color: colors.$primary !default;

.Section {
  position: relative;
  margin-bottom: 0.5em;
  background-color: functions.fake-alpha($background-color, base.$color-bg);
  background-color: $background-color;
  box-sizing: border-box;

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

.Section__title {
  position: relative;
  padding: 0.5em;
  border-bottom: base.em(2px) solid $separator-color;
}

.Section__titleText {
  font-size: base.em(14px);
  font-weight: bold;
  color: $title-text-color;
}

.Section__buttons {
  position: absolute;
  display: inline-block;
  right: 0.5em;
  margin-top: base.em(-1px);
}

.Section__rest {
  position: relative;
}

.Section__content {
  padding: 0.66em 0.5em;
}

.Section--fitted > .Section__rest > .Section__content {
  padding: 0;
}

.Section--fill {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.Section--fill > .Section__rest {
  flex-grow: 1;
}

.Section--fill > .Section__rest > .Section__content {
  height: 100%;
}

.Section--fill.Section--scrollable > .Section__rest > .Section__content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.Section--fill.Section--iefix {
  display: table !important;
  width: 100% !important;
  height: 100% !important;
  border-collapse: collapse;
  border-spacing: 0;

  & > .Section__rest {
    display: table-row !important;
    height: 100% !important;
  }
}

.Section--scrollable {
  overflow-x: hidden;
  overflow-y: hidden;

  & > .Section__rest > .Section__content {
    overflow-y: scroll;
    overflow-x: hidden;
  }
}

.Section--scrollableHorizontal {
  overflow-x: hidden;
  overflow-y: hidden;

  & > .Section__rest > .Section__content {
    overflow-y: hidden;
    overflow-x: scroll;
  }
}

.Section--scrollable.Section--scrollableHorizontal {
  overflow-x: hidden;
  overflow-y: hidden;

  & > .Section__rest > .Section__content {
    overflow-y: scroll;
    overflow-x: scroll;
  }
}

// Nested sections
.Section .Section {
  background-color: transparent;
  margin-left: -0.5em;
  margin-right: -0.5em;

  // Remove extra space above the first nested section
  &:first-child {
    margin-top: -0.5em;
  }
}

// Level 2 section title
.Section .Section .Section__titleText {
  font-size: base.em(13px);
}

// Level 3 section title
.Section .Section .Section .Section__titleText {
  font-size: base.em(12px);
}

.Section--flex {
  display: flex;
  flex-flow: column;
}

.Section--flex .Section__content {
  overflow: auto;
  flex-grow: 1;
}

.Section__content--noTopPadding {
  padding-top: 0;
}

.Section__content--stretchContents {
  height: calc(100% - 3rem);
}