@use '../../internals/Box/styles/index' as box;
@use '../../Heading/styles/index' as heading;
@use '../../internals/ScrollView/styles/index' as scroll-view;
@use '../../Animation/styles/index' as animation;

//
// Panel
// --------------------------------------------------

.rs-panel {
  --rs-panel-header-font-size: var(--rs-font-size-md);
  --rs-panel-header-line-height: var(--rs-text-line-height-md);
  --rs-panel-padding: 1.25rem;
  --rs-panel-border-radius: var(--rs-radius-md);
  --rs-panel-btn-font-size: var(--rs-font-size-md);
  --rs-panel-btn-padding: 0.625rem;
  --rs-panel-shadow: var(--rs-shadow-md);

  border-radius: var(--rs-panel-border-radius);
  overflow: hidden;

  .rs-anim-collapse {
    display: none;

    &.rs-anim-in {
      display: block;
    }
  }

  &-bordered {
    border: 1px solid var(--rs-border-primary);
  }

  &-shaded {
    box-shadow: var(--rs-panel-shadow);
  }

  &-header,
  &-body {
    padding: var(--rs-panel-padding);
  }

  // When the width is set to full, reset the value of padding.
  &-body-fill {
    padding: 0 !important;
  }

  &-header {
    color: var(--rs-text-heading);
    font-size: var(--rs-panel-header-font-size);
    line-height: var(--rs-panel-header-line-height);
    font-weight: inherit;
  }

  &-btn {
    width: 100%;
    border: none;
    background: none;
    outline: transparent solid 2px;
    display: flex;
    align-items: center;
    font-size: var(--rs-panel-btn-font-size);
    padding: var(--rs-panel-btn-padding);
    border-radius: var(--rs-panel-border-radius);

    &:hover,
    &:focus,
    &:active {
      background-color: var(--rs-btn-subtle-hover-bg);
      color: var(--rs-btn-subtle-hover-text);
      outline: transparent solid 2px;
    }

    &-icon {
      transition: transform 0.2s ease 0s;
    }

    &[aria-expanded='true'] {
      .rs-panel-btn-icon {
        transform: rotate(180deg);
      }
    }

    &[disabled] {
      cursor: not-allowed;
      color: var(--rs-text-disabled);
      background-color: var(--rs-btn-subtle-disabled-bg);
    }
  }

  &-title {
    margin: 0;
    flex: 1 1 0%;
    text-align: start;

    a {
      color: inherit;

      &:hover,
      &:focus,
      &:active {
        text-decoration: none;
      }
    }
  }

  // Adjust the padding value when the head and body are combined.
  &-header + &-body-collapse &-body,
  &-header + &-body {
    padding-top: 0;
  }

  // Collapsible panel header hover background
  &-collapsible > &-header {
    cursor: pointer;
    transition:
      background-color 0.3s linear,
      border-radius 0.3s linear;
    position: relative;
    padding: calc(var(--rs-spacing) * 2.5);
  }
}