/* card */

.card {
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.05);
}

.card-header {
  border-bottom: none;
}

/* Stubbing out .nwf-card-header selector here for future Angular component development */
.nwf-card-header {
  /* begin taken from BS card-header default style */
  padding: $card-spacer-y $card-spacer-x;
  margin-bottom: 0; // Removes the default margin-bottom of <hN>
  color: $card-cap-color;
  /* end taken from BS card-header default style */
  align-items: flex-start;
  display: flex;
  padding-top: $luci-space-lg;

  .card-is-collapsed & {
    padding-bottom: $luci-space-lg;
  }

  .card-is-collapsible & {
    padding-right: $luci-space-xxl;
  }

  .card-title {
    flex-grow: 1;
    margin: 0;
  }

  & + .card-body {
    padding-top: 0;
  }

  > .btn {
    &:first-child {
      margin-right: 2px;
      margin-left: -18px;

      /* animates chevron icon when collapsing */
      &[aria-expanded="false"],
      .card-is-collapsed & {
        .nwf-icon {
          transition: 0.1s ease-out transform;
          transform: rotate(180deg);
        }
      }
    }
  }

  > .btn,
  > .dropdown {
    margin-bottom: -6px;
    margin-top: -$luci-space-xs;

    &:not(:first-child) {
      margin-left: $luci-space-xxs;
    }

    &:last-child {
      margin-right: -$luci-space-xs;
    }
  }

  .card-is-collapsible & {
    > .btn,
    > .dropdown {
      &:last-child {
        margin-right: -$luci-space-xl;
      }
    }
  }
}

.card-title {
  font-size: $luci-font-size-h4-lg - 2px;
  font-weight: $luci-font-weight-light;

  /* Buttons within card titles are to the right, like kabobs */
  .btn {
    float: right;
    position: relative;
    bottom: $luci-space-xs;
    left: $luci-space-sm;
    margin-bottom: -$luci-space-md;
  }
}

.card-body {
  /* collapsible cards have bigger padding */
  .card-is-collapsible & {
    padding-bottom: $luci-space-xxl;
    padding-right: $luci-space-xxl;
    padding-left: $luci-space-xxl;
  }

  /* remove right padding to accomodate scrollbar width */
  .card-is-scrollable & {
    padding-right: 0;

    /* override .dx-scrollable default styles instances inside card-is-scrollable */
    .dx-scrollable {
      &:hover {
        .dx-scrollbar-hoverable {
          background: $luci-color-neutral-96;
        }
      }

      .dx-scrollable-scroll {
        padding: 0;
        width: $luci-space-xs !important;
      }

      .dx-scrollable-scroll-content {
        background: $luci-color-neutral-76;
      }

      .dx-scrollbar-hoverable {
        width: $luci-space-xs !important;

        &.dx-state-hover {
          background: $luci-color-neutral-96;
        }
      }
    }
  }
}