@import "xconsole";

.teamix-pro-card {
  width: 100%;

  &-container {
    display: flex;

    &-wrap {
      flex-wrap: wrap;
    }

    &-flex {
      &-row {
        flex-direction: row;
      }

      &-row-reverse {
        flex-direction: row-reverse;
      }

      &-column {
        flex-direction: column;
      }

      &-column-reverse {
        flex-direction: column-reverse;
      }
    }
  }

  &-col {
    width: 100%;
    $grid-columns: 24;
    @for $i from 1 through $grid-columns {
      &-#{$i} {
        $width: percentage($i / $grid-columns);
        flex: 0 0 $width;
        width: $width;
        max-width: $width;
      }
    }
  }

  .next-card-header-titles {
    padding-right: 8px;
  }
  .next-card-header-extra {
    margin-top: 2px;
  }

  &-title {
    display: flex;
    align-items: center;

    .next-menu-btn.next-menu-btn.next-menu-btn.next-menu-btn.next-menu-btn.next-menu-btn {
      i {
        margin-right: 0;
      }
    }

    & > div {
      display: flex;
      align-items: center;
      &:not(:last-child) {
        margin-right: var(--s-2, 8px);
      }
    }

    &-name {
      flex-shrink: 0;
    }
    &-name > .teamix-pro-field {
     width: calc(100% - 24px);
    }

    &-collapse {
      cursor: pointer;
      .teamix-pro-card-title-name {
        width: 100%;
      }

      & > i {
        transition: transform 0.2s;
        color: var(--color-text1-8, #848484);
        margin-right: var(--s-2, 8px);
      }

      &.collapsed {
        & > i {
          transform: rotate(-90deg);
        }
      }
    }

    &-description,
    &-tooltip {
      color: var(--color-text1-8, #848484);
      font-weight: normal;
    }

    &-description {
      font-size: 12px;
      min-width: 40px;
    }
  }

  &-divider {
    flex: none;
    background-color: var(--color-line1-1, #eaeaea);
  }

  &-content {
    &.centered {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    &.contain-pro-card {
      display: flex;

      &.flex-wrap {
        flex-wrap: wrap;
      }

      &.flex-direction {
        &-row {
          flex-direction: row;

          .teamix-pro-card-divider {
            width: 1px;
          }
        }

        &-row-reverse {
          flex-direction: row-reverse;
          .teamix-pro-card-divider {
            width: 1px;
          }
        }

        &-column {
          flex-direction: column;
          .teamix-pro-card-divider {
            height: 1px;
          }
        }

        &-column-reverse {
          flex-direction: column-reverse;
          .teamix-pro-card-divider {
            height: 1px;
          }
        }
      }

      &.split-horizontal,
      &.split-vertical {
        & > .teamix-pro-card-col > .teamix-pro-card {
          border: none;
        }
      }

      &.split-horizontal {
        & > .teamix-pro-card-col {
          &:not(:last-child) {
            border-right: 1px solid var(--color-line1-1, #eaeaea);
          }
        }
      }
      &.split-vertical {
        & > .teamix-pro-card-col {
          &:not(:last-child) {
            border-bottom: 1px solid var(--color-line1-1, #eaeaea);
          }
        }
      }
    }

    &-message {
      margin-bottom: var(--s-2);
    }
  }

  &-tab {
    margin-top: calc(0px - var(--s-2));

    & > .next-tabs-bar {
      border-bottom: none;
    }

    & > .next-tabs-content {
      padding-top: var(--s-5, 20px);
    }
  }

  &-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--color-text1-8, #848484);
  }

  & > .next-card-actions {
    & > .teamix-pro-actions {
      & > .next-btn {
        margin-right: 0;
        flex-grow: 1;
      }

      & > .next-divider {
        margin: 0;
      }
    }
  }

  &.hoverable {
    &:hover {
      box-shadow: var(--shadow-3, 0px 6px 24px 0px rgba(0, 0, 0, 0.1));
    }
  }

  &.compacted {
    border: none;

    & > .next-card-header {
      margin-top: 0;
      padding: 0;
    }
    & > .next-card-content-container {
      margin: 0;
      padding: 0;
    }
  }

  &.border {
    &-blue {
      border-color: var(--color-notice-5);
    }

    &-orange {
      border-color: var(--color-warning-5);
    }

    &-yellow {
      border-color: var(--color-help-5);
    }

    &-red {
      border-color: var(--color-error-5);
    }

    &-green {
      border-color: var(--color-success-5);
    }

    &-grey {
      border-color: var(--color-line1-1);
    }

    &-transparent {
      border-color: transparent;
    }

    &-none {
      border: none;
    }
  }

  &-selectable {
    cursor: pointer;

    &-icon {
      &-selected {
        color: var(--color-notice-5);
      }

      &-unselected {
        color: var(--color-line1-1);
      }
    }
  }

  &.blue {
    background-color: var(--color-notice-1);
  }

  &.orange {
    background-color: var(--color-warning-1);
  }

  &.yellow {
    background-color: var(--color-help-1);
  }

  &.red {
    background-color: var(--color-error-1);
  }

  &.green {
    background-color: var(--color-success-1);
  }

  &.grey {
    background-color: var(--color-fill1-2);
  }

  &.transparent {
    background: transparent;
  }

  .next-card-content-container:has(.cloud-wnumbercard-data-overview-container) {
    margin-top: -4px;
  }

}