@use 'variables.scss';

.jsa-theme-accordion {
  background-color: var(--jsa-acc-dl-bg, #{variables.$jsa-dl-bg});
  border: 1px solid var(--jsa-acc-dt-border-color, #{variables.$jsa-dt-border-color});

  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  scroll-margin-top: 80px;
  scroll-margin-bottom: 100px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;

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

  dt {
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    font-family: var(--jsa-acc-font-family, #{variables.$jsa-font-family});


    @media (prefers-color-scheme: dark) {
      font-family: var(--jsa-acc-font-family-darkmode, #{variables.$jsa-font-family-darkmode});
    }


    &.active {
      border-bottom: none;
      border-top: none;

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


        &.first-term {
          border-top-right-radius: 10px;
          border-top-left-radius: 10px;
          border-bottom-right-radius: 0;
          border-bottom-left-radius: 0;
        }

        &.last-term {
          border-top-right-radius: 0;
          border-top-left-radius: 0;
          border-bottom-right-radius: 0;
          border-bottom-left-radius: 0;
        }

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


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

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

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

        @media (prefers-color-scheme: dark) {
          color: var(--jsa-acc-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-acc-dt-expand-icon-size, #{variables.$jsa-dt-expand-icon-size})));
        right: var(--jsa-acc-dt-expand-icon-right, 1em);
        font-size: var(--jsa-acc-dt-expand-icon-size, #{variables.$jsa-dt-expand-icon-size});
        color: currentColor;
      }
    }
  }

  dd {
    max-height: 0;
    font-family: var(--jsa-acc-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);

    border-bottom: 1px solid var(--jsa-acc-dt-border-color, #{variables.$jsa-dt-border-color});

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


    &.last-term {
      border-bottom-right-radius: 10px;
      border-bottom-left-radius: 10px;
    }


    @media (prefers-color-scheme: dark) {

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


    div {
      padding: 1rem 2rem;
    }
  }
}