@use '../colors';
@use '../typography';

.section-header {
  margin: 20px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  &:before,
  &:after {
    flex: 1 0;
    content: '';
    border-bottom: 1px solid;
    .dark & {
      border-color: colors.border-color(dark);
    }
    .light & {
      border-color: colors.border-color(light);
    }
  }
  &:before {
    margin-right: 1ex;
  }
  &:after {
    margin-left: 1ex;
  }

  .section-header-section {
    @extend .text-label;
    @extend .text-deemphasis;

    &,
    div {
      display: inline-block;
    }
    & + .section-header-section {
      margin-left: 2ex;
    }
    &.clickable {
      cursor: pointer;
      border-bottom: 1px solid transparent;
      transition: ease border-color 0.2s;
      &:hover {
        .dark & {
          border-color: colors.on-color-deemphasis(dark);
        }
        .light & {
          border-color: colors.on-color-deemphasis(light);
        }
      }
    }

    button {
      @extend .text-label;
      @extend .text-deemphasis;
      text-transform: uppercase;
      background: none;
      border-radius: 10px;
      border-style: solid;
      .dark & {
        border-color: colors.border-color(dark);
      }
      .light & {
        border-color: colors.border-color(light);
      }
    }
  }
}
