.cards--create-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  padding: 1.5rem;
  border-radius: var(--table-radius);
  background-color: white;
  outline: solid 1px var(--neutral-100);
}

.cards--create-card-header {
  width: 100%;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--neutral-100);

  span {
    font-variation-settings: 'wght' var(--text-medium);
    color: var(--neutral-900);
  }
}

.cards--create-card-content {
  width: 100%;
  padding-top: 1.5rem;
}

.cards--card {
  background-color: white;
  border-radius: var(--radius-lg);
  width: 100%;
  padding: 1.5rem;
  box-shadow: var(--shadow-neutral-xs);
  outline: solid 1px var(--border-subtle);
}

.cards--card-with-title {
  padding: 0;

  .cards--card-header {
    padding: 1.5rem 1.5rem 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: .25rem;
    height: 3.5rem;

    .cards--card-header-content {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      gap: .5rem;

      button > span {
        transition: transform 0.3s ease-in-out;
      }

      .cards--card-title {
        font-variation-settings: 'wght' var(--text-medium);
        color: var(--neutral-900);
        font-size: 1rem;
      }
    }
  }

  &[data-shrinkable="true"][data-expanded="false"] {
    .cards--card-header {
      border-bottom: none;

      .cards--card-header-content > button > span {
        transform: rotate(-90deg);
      }
    }

    .cards--card-content {
      display: none;
    }
  }

  .cards--card-content {
    padding: 1.5rem;
    position: relative;

    .cards--card-content-limit-height-indicator {
      display: none;
    }

    &:has([data-expanded="true"]) {
      .cards--card-content-limit-height-indicator {
        display: none;
      }
    }

    &:has([data-should-limit-height="true"]) {
      overflow: hidden;

      .cards--card-content-limit-height-indicator {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1.5rem;
        background-color: rgba(255, 255, 255, 0.9);
        display: flex;
        align-items: center;
        justify-content: flex-end;
        border-bottom-left-radius: var(--radius-md);
        border-bottom-right-radius: var(--radius-md);
  
        button {
          font-size: var(--rem-11);
          color: var(--text-label);
          font-variation-settings: 'wght' var(--text-semibold);
          padding: 0;
          background-color: transparent;
          width: 100%;
          text-align: center;
        }
      }
    }
  }
}

.cards--column-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1rem;
}

.cards--row-container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2rem;

  &[data-has-two-columns="true"] {
    .cards--column-container {
      width: calc(50% - 1rem);
    }
  }
}

.cards--item-label {
  font-size: var(--rem-14);
  line-height: 1.375rem;
  font-variation-settings: 'wght' var(--text-medium);
  color: var(--text-label);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 10rem;

  &[data-size="sm"] {
    width: 8.75rem;
  }
}

.cards--item-value {
  font-size: var(--rem-14);
  line-height: 1.375rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: calc(100% - 10rem - 1rem);

  &[data-size="sm"] {
    width: calc(100% - 8.75rem - 1rem);
  }

  &[data-value-type="text"] {
    color: var(--text-body);
  }

  &[data-value-type="disabled-text"] {
    color: var(--text-additional);
  }

  &.flex-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
  }

  &.flex-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.5rem;
  }

  &[data-value-type="link"] {
    color: var(--text-action-neutral);
    text-decoration: none;
  }

  @media screen and (max-width: 576px) {
    width: 100%;
  }
}

.cards--column-container-row-item {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1rem;

  @media screen and (max-width: 576px) {
    flex-direction: column;
    gap: .25rem;
  }
}

.cards--column-container-column-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.5rem;

  &[data-size="md"] {
    gap: 1rem;
  }
}

.cards--row-container-row-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  max-width: calc(50% - 1rem);
  flex-shrink: 1;
  flex-grow: 1;
  min-width: 0;
}

.cards--card-header-link {
  text-decoration: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: .25rem;

  span {
    font-size: var(--rem-13);
    color: var(--text-action-tertiary);
    font-variation-settings: 'wght' var(--text-medium);
  }

  i {
    transition: transform 0.2s ease-in-out;
  }

  &:hover {
    i {
      transform: translateX(.125rem);
    }
  }
}

.cards--card-content-divider {
  width: 100%;
  height: 1px;
  background-color: var(--border-secondary);
  margin: 1rem 0;
}

.cards--standard-list-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1rem;
}