//
//  DIALTONE
//  COMPONENTS: ITEM LAYOUT
//
// Custom layout to enable developer to use list-item like stack.
// It is used as base for `dt-list-item` component
// visit https://dialtone.dialpad.com/components/item_layout
//
//  TABLE OF CONTENTS
//  • BASE STYLE
//
//  ============================================================================
//  $   BASE STYLE
//  ----------------------------------------------------------------------------
.d-item-layout {
  display: flex;
  align-items: stretch;
  min-height: calc(var(--dt-size-550) + var(--dt-size-300));
  padding: var(--dt-space-300) var(--dt-space-400);
  font-size: var(--dt-font-size-200);
  line-height: var(--dt-font-line-height-300);

  > .d-item-layout__content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
    min-width: var(--dt-size-0);

    > .d-item-layout__subtitle {
      color: var(--dt-color-foreground-tertiary);
      font-size: var(--dt-font-size-100);
    }

    > .d-item-layout__subtitle-with-title {
      margin-top: var(--dt-space-200-negative);
    }

    > .d-item-layout__bottom {
      margin-top: var(--dt-space-200);
    }
  }

  > .d-item-layout__right,
  > .d-item-layout__left {
    display: flex;
    align-items: center;
    min-width: var(--dt-size-600);
    min-height: inherit;
  }

  > .d-item-layout__right {
    flex-shrink: 0;
    padding-left: var(--dt-space-400);
  }

  > .d-item-layout__left {
    justify-content: flex-end;
    padding-right: var(--dt-space-400);
  }

  > .d-item-layout__selected {
    display: flex;
    align-items: center;
  }
}

.d-item-layout--custom {
  display: grid;

  .d-item-layout__content {
    display: grid;
    grid-auto-rows: auto;
  }
}