/* We don't use 2xl, 3xl, 4xl map keys because in some Intellij configurations, these keys are reformatted */
:host {
  /**
   * @prop --panel-bottom-margin: Overrides the default margin value.
   */
  --panel-bottom-margin: var(--joy-core-spacing-8);
  display: block;
  width: 100%;
  max-width: 100%;
}

:host([no-margin]) {
  --panel-bottom-margin: 0;
}

::slotted([slot=panel-title]) {
  text-align: left;
  color: var(--joy-color-text-title);
  margin: 0;
  padding: 0;
  flex: 1;
}

::slotted([slot=panel-subtitle]) {
  font-weight: var(--joy-font-weight-normal);
  font-size: var(--joy-font-size-primary-300);
  line-height: var(--joy-line-height-large);
  font-family: var(--joy-font-family-base);
  flex-basis: 100%;
  margin: var(--joy-core-spacing-2) 0 0;
  padding: 0;
}

::slotted([slot=panel-body]) {
  margin: var(--joy-core-spacing-4) 0 0;
}

::slotted([slot=panel-action]) {
  margin-top: var(--joy-core-spacing-9);
}
@media screen and (max-width: 767px) {
  ::slotted([slot=panel-action]) {
    margin-top: var(--joy-core-spacing-8);
  }
}

.joy-panel {
  display: block;
  box-sizing: border-box;
  padding: var(--joy-core-spacing-8);
  background-color: white;
  border-radius: var(--joy-core-radius-3);
  position: relative;
  border: 1px solid var(--joy-color-neutral-30);
  font-family: var(--joy-font-family-base);
  margin-bottom: var(--panel-bottom-margin);
}
.joy-panel--large {
  padding: var(--joy-core-spacing-8);
}
.joy-panel--medium {
  padding: var(--joy-core-spacing-6);
}
.joy-panel--small {
  padding: var(--joy-core-spacing-4);
}
@media screen and (max-width: 990px) {
  .joy-panel {
    padding: var(--joy-core-spacing-6);
  }
}
@media screen and (max-width: 767px) {
  .joy-panel {
    padding: var(--joy-core-spacing-4);
  }
}
.joy-panel__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
}
.joy-panel__header--slotted {
  margin-bottom: var(--joy-core-spacing-4);
}
.joy-panel__header--small ::slotted([slot=panel-title]) {
  font-weight: var(--joy-font-weight-bold);
  font-size: var(--joy-font-size-primary-400);
  line-height: var(--joy-line-height-large);
  font-family: var(--joy-font-family-base);
}
.joy-panel__header--large ::slotted([slot=panel-title]) {
  font-weight: var(--joy-font-weight-bold);
  font-size: var(--joy-font-size-primary-600);
  line-height: var(--joy-line-height-large);
  font-family: var(--joy-font-family-base);
}
.joy-panel__body {
  position: relative;
}
.joy-panel__footer joy-wrapper {
  --wrapper-gap: var(--joy-core-spacing-4);
  margin-bottom: 0;
}
@media screen and (max-width: 479px) {
  .joy-panel__footer joy-wrapper::part(flex-parent) {
    flex-direction: column;
    align-items: stretch;
  }
}
.joy-panel .joy-panel, .joy-panel__section {
  margin-top: var(--joy-core-spacing-9);
}
@media screen and (max-width: 767px) {
  .joy-panel .joy-panel, .joy-panel__section {
    margin-top: var(--joy-core-spacing-8);
  }
}
.joy-panel .joy-panel:first-child, .joy-panel__section:first-child {
  margin-top: 0;
}
.joy-panel .joy-panel .joy-panel__title, .joy-panel__section .joy-panel__title {
  font-weight: var(--joy-font-weight-bold);
  font-size: var(--joy-font-size-primary-600);
  line-height: var(--joy-line-height-large);
  font-family: var(--joy-font-family-base);
}