@use 'variables';


.jsa-theme-minimal {
  background-color: var(--jsa-min-dl-bg, #{variables.$jsa-dl-bg});

  @media (prefers-color-scheme: dark) {
    background-color: var(--jsa-min-dl-bg-darkmode, #{variables.$jsa-dl-bg-darkmode});
  }

  dt {
    display: flex;
    align-items: center;
    position: relative;
    font-family: var(--jsa-min-font-family, #{variables.$jsa-font-family});
    border-top: 1px solid var(--jsa-min-dt-border-color, #{variables.$jsa-dt-border-color});

    @media (prefers-color-scheme: dark) {
      font-family: var(--jsa-min-font-family-darkmode, #{variables.$jsa-font-family-darkmode});
      border-top: 1px solid var(--jsa-min-dt-border-color-darkmode, #{variables.$jsa-dt-border-color-darkmode});
    }

    &.active {
      border-bottom: none;
      border-top: 1px solid var(--jsa-min-dt-border-color, #{variables.$jsa-dt-border-color});
      background-color: var(--jsa-min-dt-bgcolor-active, #{variables.$jsa-dt-bgcolor-active});

      @media (prefers-color-scheme: dark) {
        border-top: 1px solid var(--jsa-min-dt-border-color-darkmode, #{variables.$jsa-dt-border-color-darkmode});
        background-color: var(--jsa-min-dt-bgcolor-active-darkmode, #{variables.$jsa-dt-bgcolor-active-darkmode});
      }

      h2,
      a {
        color: var(--jsa-min-dt-anchor-active-color, #{variables.$jsa-dt-anchor-active-color});

        @media (prefers-color-scheme: dark) {
          color: var(--jsa-min-dt-anchor-active-color-darkmode, #{variables.$jsa-dt-anchor-active-color-darkmode});
        }
      }
    }

    &:first-of-type {
      border-top: 1px solid var(--jsa-min-dt-border-color, #{variables.$jsa-dt-border-color});

      @media (prefers-color-scheme: dark) {
        border-top: 1px solid var(--jsa-min-dt-border-color-darkmode, #{variables.$jsa-dt-border-color-darkmode});
      }
    }

    &:last-of-type {
      &.active {
        border-bottom: none;
      }
    }

    h2,
    a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-family: var(--jsa-min-font-family, #{variables.$jsa-font-family});
      font-weight: var(--jsa-min-dt-font-weight, #{variables.$jsa-dt-font-weight});
      color: var(--jsa-min-dt-anchor-color, #{variables.$jsa-dt-anchor-color});
      text-decoration: var(--jsa-min-dt-anchor-decoration, #{variables.$jsa-dt-anchor-decoration});
      width: 100%;
      padding: var(--jsa-min-dt-padding, #{variables.$jsa-dt-padding});
      cursor: pointer;

      @media (prefers-color-scheme: dark) {
        color: var(--jsa-min-dt-anchor-color-darkmode, #{variables.$jsa-dt-anchor-color-darkmode});
      }

      &:hover {
        color: var(--jsa-min-dt-anchor-hover-color, #{variables.$jsa-dt-anchor-hover-color});
        text-decoration: var(--jsa-min-dt-anchor-decoration-hover, #{variables.$jsa-dt-anchor-decoration-hover});

        @media (prefers-color-scheme: dark) {
          color: var(--jsa-min-dt-anchor-hover-color-darkmode, #{variables.$jsa-dt-anchor-hover-color-darkmode});
        }
      }

      &[aria-expanded="true"]::after {
        content: "-";
      }

      &::after {
        content: "+";
        display: inline-block;
        position: absolute;
        top: calc(50% * (var(--jsa-min-dt-expand-icon-size, #{variables.$jsa-dt-expand-icon-size})));
        right: var(--jsa-min-dt-expand-icon-right, #{variables.$jsa-dt-expand-icon-right});
        font-size: var(--jsa-min-dt-expand-icon-size, #{variables.$jsa-dt-expand-icon-size});
        color: currentColor;
      }
    }
  }


  dd {
    max-height: 0;
    font-family: var(--jsa-min-font-family, #{variables.$jsa-font-family});
    overflow: hidden;
    padding: 0;
    margin: 0;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);


    @media (prefers-color-scheme: dark) {
      background-color: var(--jsa-min-dd-bgcolor-darkmode, #{variables.$jsa-dd-bgcolor-darkmode});

      >* {
        color: var(--jsa-min-dd-text-color-darkmode, #{variables.$jsa-dd-text-color-darkmode});
      }
    }

  }
}