/* ==========================================================================
 * Panel
 * ========================================================================== */

.mds-c-panels {
  height: 100%;
  margin: calc(var(--mds-d-spacing--sm) * -1) 0 0
    calc(var(--mds-d-spacing--sm) * -1);

  @media screen and (min-width: 750px) {
    align-items: flex-start;
    display: flex;
    justify-content: flex-start;
  }
}

.mds-c-panel {
  --mds-t-background-color: var(--mds-t-background-color--secondary);

  background-color: var(--mds-t-background-color);
  border-radius: var(--mds-d-border-radius--large);
  border-top: var(--mds-d-border-radius--large) solid
    var(--mds-v-panel__border-top-color);
  height: 100%;
  margin: var(--mds-d-spacing--sm);
  padding: var(--mds-d-spacing--med);

  @media screen and (max-width: 749px) {
    &:not(:last-child) {
      margin-bottom: var(--mds-d-spacing--lg);
    }
  }

  @media screen and (min-width: 750px) {
    align-items: stretch;
    display: flex;
    flex: 0 0 24rem;
    flex-direction: column;
  }

  &--theme-primary {
    --mds-v-panel__border-top-color: var(--mds-t-color--neutral-intense);
  }

  &--theme-secondary {
    --mds-v-panel__border-top-color: var(--mds-t-color--neutral);
  }

  &--theme-tertiary {
    --mds-v-panel__border-top-color: var(--mds-t-color--neutral-muted);
  }

  &--theme-blue {
    --mds-v-panel__border-top-color: var(--mds-t-color--blue);
  }

  &--theme-green {
    --mds-v-panel__border-top-color: var(--mds-t-color--green);
  }

  &--theme-orange {
    --mds-v-panel__border-top-color: var(--mds-t-color--orange);
  }

  &--theme-pink {
    --mds-v-panel__border-top-color: var(--mds-t-color--pink);
  }

  &--theme-purple {
    --mds-v-panel__border-top-color: var(--mds-t-color--purple);
  }

  &--theme-red {
    --mds-v-panel__border-top-color: var(--mds-t-color--red);
  }

  &--theme-yellow {
    --mds-v-panel__border-top-color: var(--mds-t-color--yellow);
  }

  &--with-footer {
    padding-bottom: var(--mds-d-spacing--sm);
  }

  &__header {
    @mixin mds-m-heading--size-sm;

    border-bottom: 1px solid var(--mds-t-border-color--secondary);
    color: var(--mds-t-text-color--primary);
    padding-bottom: var(--mds-d-spacing--med);

    small {
      color: var(--mds-t-text-color--tertiary);
    }
  }

  &__content {
    @mixin mds-m-scrollbar-panel;

    height: 100%;
    margin-top: var(--mds-d-spacing--sm);
    overflow-y: auto;

    &--scroll {
      padding-right: var(--mds-d-spacing--xs);
    }
  }
}

.mds-c-panel-group {
  display: flex;
  height: 100%;
  overflow-x: auto;
  padding-bottom: var(--mds-d-spacing--xl);
  width: 100%;
}