@use '../theme.scss' as *;
@use 'sass:map';

$segmentBgColor: var(--depth-bg);
$segmentBoxShadow: var(--depth-bs);
$segmentHorizontalPadding: 14px;
$segmentVerticalPadding: 14px;

.be-segments {
  background-color: $segmentBgColor;
  .be-segment {
    margin: 0;
    border-radius: 0;
    background-color: transparent;
    &.border {
      border: 0;
    }
    &.float {
      box-shadow: none;
    }
    &[class*='round-'] {
      border-radius: 0;
    }
  }
  &.border {
    border: 1px solid var(--brd);
    .be-segment.border {
      border-bottom: 1px solid var(--brd);
      &:last-child {
        border: 0;
      }
    }
  }
  &.float {
    box-shadow: $segmentBoxShadow;
  }
  &.round {
    &-s {
      border-radius: map.get($layoutRadiuses, 's');
    }
    &-m {
      border-radius: map.get($layoutRadiuses, 'm');
    }
    &-l {
      border-radius: map.get($layoutRadiuses, 'l');
    }
    &-xl {
      border-radius: map.get($layoutRadiuses, 'xl');
    }
  }
}
.be-segment {
  border-radius: $baseBorderRadius;

  background-color: $segmentBgColor;
  margin-bottom: 12px;
  overflow: auto;
  & > div {
    padding: $segmentHorizontalPadding;
  }
  &:last-child {
    margin: 0;
  }
  &.border {
    border: 1px solid var(--brd);
  }
  &.float {
    box-shadow: $segmentBoxShadow;
  }
  &.align {
    &-left {
      text-align: left;
    }
    &-center {
      text-align: center;
    }
    &-right {
      text-align: right;
    }
  }
  &.surface {
    background-color: var(--suf);
  }
  &.attached {
    > .header {
      border-top-left-radius: inherit;
      border-top-right-radius: inherit;
    }
    > .footer {
      border-bottom-left-radius: inherit;
      border-bottom-right-radius: inherit;
    }
  }
  &.round {
    &-s {
      border-radius: map.get($layoutRadiuses, 's');
    }
    &-m {
      border-radius: map.get($layoutRadiuses, 'm');
    }
    &-l {
      border-radius: map.get($layoutRadiuses, 'l');
    }
    &-xl {
      border-radius: map.get($layoutRadiuses, 'xl');
    }
  }
  &.collapse {
    --max-line: 10em;
    height: var(--max-line);
    overflow-y: hidden;
    &.detail {
      height: max-content;
      transition: all 500ms;
      .toggle-detail {
        background: transparent;
        height: auto;
        &:after {
          content: 'collapse';
          top: 0;
        }
      }
    }
    .toggle-detail {
      cursor: pointer;
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 30%;
      text-align: center;
      background: linear-gradient(
        0,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0.5) 100%
      );
      &:after {
        content: 'Detail';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
        padding: 4px 10px;
        border-radius: 1em;
        opacity: 0.5;
        transition: opacity 250ms;
      }
      &:hover:after {
        opacity: 1;
      }
    }
  }
}