// Cards/Widgets
//=======================================================
$card: '.card', '.widget', '.small-widget';
$card-content: '.card-content', '.widget-content';
$card-header: '.card-header', '.widget-header';
$card-header-section: '.card-header-section', '.widget-header-section';

// For Cards selection that uses .cards as parent class
.cards {
  &.single .card.is-selectable:focus-visible {
    @include focus-state();
  }

  .card {
    cursor: pointer;

    &.is-selected {
      background-color: $card-selected-background-color;
      border: 2px solid $card-selected-border-color;

      .card-content {
        border: none;
      }
    }

    &:not(.is-selected) {
      .card-content {
        border: 1px solid transparent;
      }
    }

    .card-content {
      padding: 16px;

      .checkbox-label {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);

        ~ p {
          margin-inline-start: 35px;
        }
      }

      p:not(:first-child):not(.text-strong) {
        color: $card-expandable-sub-heading;
      }

      p + p {
        margin-top: 5px;
      }
    }
  }

  &.multiple,
  &.single {
    .card-content,
    .widget-content {
      align-items: start !important;
      flex-wrap: nowrap;
    }
  }
}

.card,
.small-widget,
.widget {
  background-color: $cardlist-bg-color;
  border: 1px solid $cardlist-border-color;
  border-radius: 2px;
  margin-bottom: 16px;
  min-height: 360px;
  position: relative;
  width: 100%;

  &.no-header {
    .card-content {
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;

      .btn-actions-wrapper {
        min-width: 38px;
        min-height: 38px;
        padding: 2px;
        margin: 1px;
        position: absolute;
        right: 8px;
        top: 8px;
      }
    }
  }

  &.border-less {
    background: none;
    border: none;
    box-shadow: none;
  }

  &.compact-bottom {
    margin-bottom: 8px;
  }

  &.card-variant {
    height: auto;
    min-height: 0;
    max-height: none;
    align-items: center;
    display: flex;
    flex-flow: nowrap;
    justify-content: space-between;

    .widget-content,
    .card-content {
      height: auto;
      min-height: auto;
      max-height: none;
    }

    .card-image {
      padding: 15px 0 15px 15px;
      flex: 0 0 auto;
    }

    .card-content {
      padding: 15px 16px;

      div {
        &.card-content-status {
          margin-left: -4px;
          margin-bottom: 5px;
          color: $card-content-status-success-color;

          .icon {
            margin-top: -2px;
            vertical-align: middle;
            height: 8px;
            color: $card-content-status-success-color;
          }

          &.success {
            color: $card-content-status-success-color;

            .icon {
              color: $card-content-status-success-color;
            }
          }

          &.alert {
            color: $card-content-status-alert-color;

            .icon {
              color: $card-content-status-alert-color;
            }
          }

          &.error {
            color: $card-content-status-error-color;

            .icon {
              color: $card-content-status-error-color;
            }
          }
        }

        &.card-content-header {
          color: $card-content-header-color;
          font-size: 16px;
          margin-top: 0;

          .header-status {
            color: $card-content-header-status-available-color;

            &.available {
              color: $card-content-header-status-available-color;
            }

            &.busy {
              color: $card-content-header-status-busy-color;
            }

            &.away {
              color: $card-content-header-status-away-color;
            }
          }
        }

        &.card-content-sub {
          color: $card-content-sub-color;
          margin-top: 2px;
          font-size: 1.6rem;

          .hyperlink {
            padding: 4px 3px;
          }
        }
      }
    }

    .card-buttonset {
      display: flex;

      .card-content-action {
        .btn {
          margin-right: 8px;

          span {
            margin-right: 5px;
          }
        }

        .btn-actions {
          margin-right: 8px;
        }
      }
    }
  }

  // Empty State Containers can have variable height
  &.is-empty {
    min-height: 0;

    &.no-border {
      border: 1px solid transparent;
      box-shadow: unset;
    }

    &.inverted {
      background-color: $typography-background-inverted;

      .card-empty-title {
        color: $typography-card-title-inverted;
      }

      .card-empty-info {
        p {
          color: $typography-card-info-inverted;
        }
      }
    }

    .card-content,
    .widget-content {
      height: auto;
      min-height: 0;
    }

    .card-content {
      margin: 0;
      position: absolute;
      top: 50%;
      padding-top: 12px;

      .notification-container {
        position: relative;
        width: inherit;
        top: -3px;
      }

      .card-empty-info {
        .font-size-px-14 {
          margin: 0 auto;
          width: 150px;

          @media only screen and (max-width: ($breakpoint-tablet-reduced - 16px)) {
            width: unset;
          }
        }
      }
    }

    .card-header + .card-content {
      padding-top: 33px;
    }
  }

  // Expandable card headers set auto-height automatically
  &.expandable-area {
    height: auto;
    min-height: 0;
    max-height: none;

    .widget-content,
    .card-content {
      height: auto;
      min-height: auto;
      max-height: none;
    }

    .expandable-header {
      &:first-child {
        padding-top: 0;
      }

      .icon {
        height: 18px;
        width: 18px;
      }
    }

    .btn-expander {
      border: 1px solid transparent;
      border-radius: 8px;
      display: inline-block;

      &:focus:not(.hide-focus) {
        border-color: $button-color-secondary-focus-border;
      }
    }
  }

  &.editable-hover-border {
    border: 1px solid $widget-editable-border-color;
  }

  .small-thin-text {
    @include font-size(11);

    color: $font-color-lowcontrast;
  }

  .full-table {
    width: 100%;
  }

  &.auto-size {
    height: auto;
    min-height: 0;
    max-height: none;
    min-width: 0;
    width: auto;

    .widget-content,
    .card-content {
      min-width: 0;
      width: auto;
      height: auto;
      min-height: auto;
      max-height: none;
    }
  }
}

// CSS Rule for new expandable card
.card.expandable-card {
  height: auto;
  min-height: 0;

  .card-header {
    height: auto;
    margin: 0;
    padding: 16px;

    &.expandable-card-header[role='button'] {
      cursor: pointer;
    }

    p + p {
      margin-top: 8px;
    }

    .sub-heading {
      color: $card-expandable-sub-heading;
    }

    button.btn-actions {
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .card-pane {
    height: 0;
    overflow: hidden;

    .listview {
      margin-bottom: 24px;

      li {
        margin: 0 17px;
        padding: 16px 7px;

        .btn-icon {
          left: 5px;
          border-radius: 50%;

          &:hover {
            background-color: transparent;
          }
        }
      }
    }
  }
}

.card-expandable-area.card.expandable-area {
  .expandable-header {
    display: inline-block;
    height: auto;
    vertical-align: middle;
    width: 100%;

    .btn-expander {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translate(0, -50%);

      svg.icon {
        &.vertical-more {
          transform: rotate(90deg);
        }
      }
    }
  }
}

.small-widget {
  margin-bottom: 24px;
  min-height: 260px;
}

.card-header,
.card-footer,
.widget-header,
.widget-footer {
  padding: 13px 20px;
  position: relative;

  .btn {
    position: relative;
    top: -9px;
  }
}

.card-header,
.widget-header {
  height: 48px;
  line-height: 48px;

  &.has-toolbar {
    padding: 0 13px 0 20px;

    .toolbar {
      height: 48px;
      line-height: normal;
    }

    .title {
      @include font-size(16);

      color: $cardlist-header-color;
      -webkit-font-smoothing: antialiased;
      font-weight: 100;
      margin: 0;
      padding-top: 3px;
      text-rendering: optimizeLegibility !important;
    }

    //Prevent FOUC
    .searchfield {
      border: 1px solid transparent;
    }

    .searchfield-wrapper {
      margin: 4px 5px 5px 0;
    }
  }

  .card-title,
  .widget-title {
    ~ svg.icon {
      background: transparent;
      cursor: pointer;
      margin-left: 5px;
      position: relative;

      @include colorPalettesProperty(color);
    }
  }

  [class^='btn'] {
    span {
      color: $listview-toolbar-button-text-color;
    }

    .icon {
      color: $listview-toolbar-button-icon-color;
    }

    &:focus,
    &:hover:not([disabled]) {
      color: $listview-toolbar-button-text-hover-color;

      span {
        color: $listview-toolbar-button-text-hover-color;
      }

      .icon {
        color: $listview-toolbar-button-icon-hover-color;
      }
    }

    &.is-selected,
    &.is-selected:focus,
    &.is-selected:hover {
      box-shadow: 0 0 0 2px transparent, 0 0 0 1px $listview-toolbar-button-text-selected-color;
      color: $listview-toolbar-button-text-selected-color;

      span {
        color: $listview-toolbar-button-text-selected-color;
      }

      .icon {
        color: $listview-toolbar-button-icon-selected-color;
      }
    }
  }

  > h2,
  > h1,
  > button {
    float: left;
    margin-bottom: 1px;
  }

  .btn-actions,
  .btn-system,
  .btn-actions:not([disabled]) {
    background-color: transparent !important;

    .icon {
      color: $cardlist-actions-color !important;
    }

    .audible {
      color: $cardlist-actions-color !important;
    }

    :hover {
      background-color: transparent !important;
    }

    &:hover .icon {
      color: $card-actions-toolbar-button-hover-color !important;
    }

    &.go-back {
      margin-top: -2px;
    }
  }

  &:not(.has-toolbar) {
    > .btn-actions,
    > .btn-expander {
      line-height: normal;
      margin: 0;
      padding: 0;
      position: absolute;
      inset-inline-end: 15px;
    }

    > .btn-actions {
      top: 7px;
    }

    > .btn-expander {
      top: 5px;

      .icon {
        inset-inline-start: 11px;
        top: 9px;
      }
    }

    .icon {
      position: relative;
    }
  }

  .btn-actions > .icon {
    top: unset;
  }
}

.widget-content,
.card-content {
  flex-direction: column;
  height: 317px;
  min-height: 317px;
  overflow: auto;
  width: 100%;

  &:has(.instance-count) {
    padding: 32px 16px 16px;
  }

  &.contained,
  .contained {
    height: inherit;
  }

  .card-group-action,
  .widget-group-action,
  .card-chart-action,
  .widget-chart-action {
    padding: 0 10px 0 20px;

    .toolbar {
      margin-bottom: 0;
    }
  }

  .card-group-action,
  .widget-group-action {
    background-color: $body-color-primary-background;
    border: 1px solid transparent;
    border-bottom-color: $listview-border-color;
    font-size: 16px;
  }

  .card-chart-action,
  .widget-chart-action {
    padding-top: 3px;
  }

  &.overflow-visible {
    overflow: initial;
  }
}

.card.has-footer {
  .widget-content,
  .card-content {
    height: 275px;
    min-height: 275px;
  }
}

.card-footer,
.widget-footer {
  border-top: 1px solid $cardlist-border-color;
  min-height: 50px;

  .pager-toolbar {
    a {
      margin: 2px 4px 0;
    }
  }
}

.card-list-item {
  font-size: 0;

  > * {
    display: inline-block;
    font-size: 1rem;
    vertical-align: middle;
  }

  &.alternate {
    background-color: $body-color-primary-background;
  }
}

.card-list-item-thumbnail {
  width: 64px;

  img {
    border-radius: 0.5rem;
  }
}

.card-list-item-summary {
  margin: 0 1rem;
  width: calc(100% - 64px - 2rem - 125px); // 100% - thumbnail size - this element's padding - price container's size
}

.card-list-item-price-container {
  text-align: right;
  width: 125px;
}

.card-detail-table {
  td,
  th {
    padding-top: 5px;

    &:first-child {
      padding-top: 0;
    }
  }
}

// Empty-State Widgets/Cards
.widget-empty-icon,
.card-empty-icon,
.widget-empty-title,
.card-empty-title,
.widget-empty-info,
.card-empty-info,
.widget-empty-actions,
.card-empty-actions,
.empty-icon,
.empty-title,
.empty-actions,
.empty-info {
  -webkit-font-smoothing: antialiased;
  font-weight: $ids-number-font-weight-base;
  line-height: normal;
  text-align: center;
}

.card-empty-icon,
.widget-empty-icon,
.empty-icon {
  padding: 20px 0;
}

.card-empty-title,
.widget-empty-title,
.empty-title {
  @include font-size(16);

  padding: 0 0 20px;

  &:first-child {
    padding: 30px 0 20px;
  }
}

.card-empty-info,
.widget-empty-info,
.empty-info {
  font-size: $ids-size-font-base;
  padding: 0 20px 40px;

  &:last-child {
    padding: 0 20px 30px;
  }
}

.card-empty-actions,
.widget-empty-actions,
.empty-actions {
  padding: 0 0 32px;
}

// Actionable Button Card
button,
a {
  &.btn.card {
    min-height: 50px;
    height: 50px;

    &:focus {
      &:not(.hide-focus) {
        box-shadow: 0 0 0 2px $body-color-primary-background, 0 0 0 3px $button-color-secondary-focus-border, $focus-box-shadow;
      }
    }
  }
}

a {
  &.btn.card {
    align-items: center;
    display: flex;
    justify-content: center;
    width: 100%;
  }
}

// RTL Styles
html[dir='rtl'] {
  .card-header,
  .widget-header {
    > h2,
    > h1,
    > button {
      float: right;
    }

    &:not(.expandable-card-header) {
      padding-left: 8px;
      padding-right: 16px;
    }

    &:not(.has-toolbar) > .btn-actions {
      right: auto;
    }

    &.has-toolbar {
      padding: 0 20px 0 13px;

      .searchfield-wrapper {
        margin: 8px 0 5px 5px;
      }
    }

    > button {
      float: right;
    }

    > h2,
    > h1 {
      float: right;
      width: auto;
    }
  }

  .card-content,
  .widget-content {
    .card-group-action,
    .widget-group-action {
      padding: 0 20px 0 10px;
    }

    .searchfield-wrapper.has-close-icon-button.has-text .btn-icon.close {
      right: calc(100% - 28px) !important;
      top: 7px;
    }

    .listview-search .icon.close {
      left: 0 !important;
    }

    .listview-search input {
      padding: 9px 40px 9px 26px !important;
    }
  }

  &[class*='theme-classic-'] .card-header-section.title .badge,
  &[class*='theme-classic-'] .widget-header-section.title .badge {
    left: -5px;
    top: 1px;
  }
}

.card-header,
.widget-header {
  &:not(.expandable-card-header) {
    align-items: center;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    margin: 0;
    padding-bottom: 0;
    padding-left: 16px;
    padding-right: 8px;
    padding-top: 0;

    &:has(+ .card-content .instance-count) {
      height: 40px;
      padding-top: 8px;
    }
  }

  >button.btn-actions:not(.has-toolbar) {
    position: relative;

    svg.icon {
      top: 0;
    }
  }

  .widget-title {
    margin: 0;
  }

  .widget-title:has(+ .badge) {
    width: unset;
  }

  &:not(.has-toolbar) {
    >.btn-actions {
      right: 0;
      top: -1px;
    }
  }
}

html[class*='theme-classic-'] {
  .card-header.no-border,
  .widget-header.no-border {
      border-bottom: 1px solid transparent;
  }

  .card-header,
  .widget-header {
    border-bottom: 1px solid $cardlist-border-color;

    &.has-subtitle .widget-header-section.more {
      padding-top: 0;
    }
  }


  .card-header-section,
  .widget-header-section {
    &.title,
    &.custom-action,
    &.detail-title,
    &.detail-custom-action {
      display: flex;
      flex-grow: 1;
    }
  }

  .card-header-section,
  .widget-header-section {
    &.title {
      + .custom-action,
      + .detail-custom-action {
        text-align: right;
        flex-direction: row-reverse;
      }

      .badge {
        left: 6px;
        position: relative;
        top: 2px;
      }
    }

    &.custom-action + .more {
      padding-top: 10px;
    }

    &.more {
      padding-top: 6px;
    }
  }

  .card .card-header:not(.has-back-button) .widget-header-section.detail-title {
    display: none;
  }

  #{$card} {
    #{$card-header} {
      &:not(.has-back-button) {
        #{$card-header-section} {
          &.detail-title,
          &.detail-custom-action {
            display: none;
          }
        }
      }

      &.has-subtitle {
        align-items: flex-start;
        height: 61px; // was 64 but need to be flush so for better visuals
        padding-top: 9px;

        .widget-header-section.title {
          display: block;
        }

        .widget-header-section.custom-action {
          display: block;

          button:last-child {
            margin-inline-end: 2px;
          }
        }
      }

      #{$card-header-section} {
        &.title {
          h1,
          h2,
          h3,
          h4,
          h5,
          h6 {
            font-size: $ids-size-font-px-16;
            font-weight: $ids-number-font-weight-base;
            margin: 0;
          }
        }

        &.detail-title + .detail-custom-action {
          text-align: right;
          flex-direction: row-reverse;
          padding-top: 5px;
        }
      }

      &.has-back-button {
        padding-left: 8px;

        .widget-header-section,
        .card-header-section {
          &.title,
          &.more,
          &.custom-action {
            display: none;
          }
        }
      }

      &:not(.has-back-button) {
        .widget-header-section,
        .card-header-section {
          &.detail-title,
          &.detail-more,
          &.detail-custom-action {
            display: none;
          }
        }
      }
    }

    #{$card-content} {
      position: relative;

      &.has-back-button {
        overflow-x: hidden;
      }

      &.padding-x-16 {
        .content-main,
        .content-detail {
          width: calc(100% - 32px);
        }
      }
    }

    .go-back-button {
      margin-top: -2px;
    }

    &.show-card-detail {
      #{$card-header-section} {
        &.detail-title {
          margin-top: 9px;
        }
      }

      .content-main {
        transform: translateX(-110%);
      }

      .content-detail {
        transform: translateX(0);
      }
    }

    .content-main {
      transform: translateX(0);
      width: 100%;
    }

    .content-detail {
      transform: translateX(110%);
    }

    .content-main,
    .content-detail {
      @include transform-transition-list(300ms cubic-bezier(0.17, 0.04, 0.03, 0.94));

      position: absolute;
    }
  }
}
