.admin-area section.billing {
  & p {
    padding: 0;
  }
}

.interval-btn-group-wrapper {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem;

  @media only screen and (width >= 850px) {
    flex-direction: row;
  }

  & .btn-group {
    border: 1px solid var(--scampi-800);
    border-radius: 5px;

    & > .btn {
      background-color: var(--scampi-800);
      color: white;

      &:hover,
      &:active,
      &:focus {
        background-color: var(--scampi-900);
      }

      &.active {
        background-color: var(--gray-200);
        color: var(--gray-600);
      }
    }
  }
}

.current-plan {
  align-items: center;
  border: 1px solid var(--gray-200);
  border-radius: 1rem;
  display: flex;
  justify-content: space-between;
  margin: 1rem;
  padding: 1rem;

  & svg:not(.svg-inline--fa) {
    display: none;
    height: 180px;
    width: 250px;

    @media only screen and (width >= 550px) {
      display: block;
    }
  }

  & svg.svg--dark {
    display: none;
  }

  & div > div {
    display: flex;
    gap: 1rem;
    margin: 2rem 0;
  }
}

.billing-plans {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: space-between;
  padding: 1rem;

  @media only screen and (width >= 850px) {
    flex-direction: row;
  }

  & > div {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 1rem;
    margin: 0 auto;
    width: 100%;

    @media only screen and (width >= 850px) {

    }
  }

  & > div.lite {
    & .billing-plan,
    & .billing-features {
      background-color: var(--scampi-50);
      border-color: var(--scampi-300);
      color: var(--scampi-800);

      & dl div {
        border-color: var(--scampi-200);
      }
    }
  }

  & > div.pro {
    & .billing-plan,
    & .billing-features {
      background-color: var(--gray-900);
      border-color: black;
      color: var(--scampi-200);

      & dl div {
        border-color: var(--gray-700);
      }
    }
  }

  & .billing-plan {
    border: 1px solid var(--gray-200);
    border-radius: 1rem;
    flex: 1;
    padding: 1rem;

    & h2 {
      font-size: 1.125rem;
      margin: 1rem 0;
    }

    & p {
      padding: 0;
    }

    & .btn.btn-current-plan {
      border-color: var(--scampi-700);
      color: var(--scampi-700);

      &:hover,
      &:active,
      &:focus {
        background-color: white;
        cursor: default;
      }
    }
  }

  & details {
    @media only screen and (width >= 850px) {
      display: none;
    }

    & summary {
      padding: 0 0.5rem;
      text-align: center;
    }
  }

  & details[open] {
    summary {
      display: none;
    }
  }

  & > div > .billing-features {
    display: none;

    @media only screen and (width >= 850px) {
      display: block;
    }
  }

  & .billing-features {
    border: 1px solid var(--gray-200);
    border-radius: 1rem;
    padding: 1rem;

    & dl div {
      border-top: 1px solid var(--gray-200);
      display: flex;
      font-size: 0.875rem;
      justify-content: space-between;
      gap: 1rem;
      padding: 0.5rem 0;

      &:first-child {
        border: none;
      }

      & dt {
        max-width: 20ch;
      }

      & dd {
        font-weight: 700;
      }
    }
  }
}