@use "../../wc";

:host {
  @include wc.scrollbars;
  flex-grow: 1;
  overflow: visible;
  display: flex;
  max-width: 100%;
  z-index: 1;
  position: relative;
  min-width: var(--zn-spacing-small-panel);
  flex-basis: var(--zn-panel-basis);
}


.panel {
  position: relative;
  border: 1px solid rgb(var(--zn-border-color));
  display: flex;
  border-radius: var(--zn-border-radius-large);
  flex-direction: column;
  flex-grow: 1;
  flex-basis: var(--zn-spacing-small-panel);
  width: 100%;
  background-color: rgba(var(--zn-panel), var(--zn-panel-opacity));
  margin-bottom: 3px;

  &__inner {
    overflow: hidden;
    display: flex;
    border-radius: var(--zn-border-radius-large);
    flex-direction: column;
    flex-grow: 1;
  }

  &__content {
    display: flex;
    flex-grow: 1;
    overflow: hidden;
    position: relative;
  }


  &__header {
    padding: var(--zn-spacing-x-small) var(--zn-spacing-medium);

    // background-color: rgba(var(--zn-panel-highlight), 0.6);
    // border-bottom: 1px solid rgb(var(--zn-border-color));

    &::part(base) {
      border-bottom: 0;
    }

    &::part(header-caption) {
      font-size: var(--zn-font-size-large);
    }

    &--inline {
      border-bottom: 0;
    }

    &--underline {
      border-bottom: 1px solid rgb(var(--zn-border-color));
    }

    &::part(content) {
      padding: 0;
    }
  }

  &__body {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex-grow: 1;
    padding: 0 var(--zn-spacing-medium) var(--zn-spacing-medium);

    > :not([hidden]) ~ :not([hidden]) {
      border: 1px solid rgb(var(--zn-border-color));
    }
  }

  &__footer {
    font-size: var(--zn-font-size-small);
    display: block;
    padding: var(--zn-spacing-small) var(--zn-spacing-medium);
    background: rgb(var(--zn-panel-secondary));
    border-bottom-left-radius: var(--zn-border-radius-large);
    border-bottom-right-radius: var(--zn-border-radius-large);
  }

  &--tabbed .panel__body {
    padding: 0;
  }

  &--transparent {
    background-color: transparent;
    border: none;

    &:before {
      display: none;
    }
  }

  &:not(.panel--flush, .panel--flush-x, .panel--flush-y) {
    ::slotted(zn-sp) {
      --zn-sp-padding: 0 !important
    }
  }

  &:before {
    position: absolute;
    content: '';
    bottom: -3px;
    left: 0;
    right: 0;
    height: 20px;
    background-color: rgb(var(--zn-shadow));
    border-radius: var(--zn-border-radius-large);
    z-index: -1;
  }


  &:not(.panel--has-header):not(.panel--flush, .panel--flush-y) &__body {
    padding-top: var(--zn-spacing-medium);
  }

  &--flush {
    .panel__body {
      padding: 0;
    }
  }

  &--flush-x {
    .panel__body {
      padding-inline: 0;
    }
  }

  &--flush-y {
    .panel__body {
      padding-block: 0;
    }
  }

  &--flush-footer {
    .panel__footer {
      padding: 0;
    }
  }

  &--transparent {
    .panel__header {
      padding-left: 0;
      padding-right: 0;
    }
  }

  &--cosmic {
    @include wc.cosmic-border();
  }

  &--shadow {
    box-shadow: 0 6px 20px 10px rgba(0, 0, 0, 0.25);
  }

}