@import "carbon-components/scss/globals/scss/vars";
@import "carbon-components/scss/globals/scss/helper-mixins";
@import "carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once";

/// Contained List styles
/// @access private
/// @group contained-list
@mixin contained-list {
  .#{$prefix}--contained-list .#{$prefix}--tag {
    height: 1.5rem; // 24px equivalent to md size
  }

  .#{$prefix}--contained-list > ul {
    padding: 0;
    margin: 0;
  }

  .#{$prefix}--contained-list__header {
    position: sticky;
    z-index: 1;
    display: flex;
    align-items: center;
    top: 0;
    padding-left: $spacing-05;
    padding-right: $spacing-05;
  }

  .#{$prefix}--contained-list__label {
    width: 100%;
  }

  .#{$prefix}--contained-list .#{$prefix}--search {
    position: sticky;
    z-index: 1;

    &.#{$prefix}--search--expandable .#{$prefix}--search-input {
      background-color: $field-01;
    }
  }

  .#{$prefix}--contained-list--disclosed .#{$prefix}--search {
    top: 2rem; // Fixed header height for disclosed variant
  }

  .#{$prefix}--contained-list--on-page .#{$prefix}--search {
    top: 3rem; // Default md size header height
  }

  .#{$prefix}--contained-list--on-page.#{$prefix}--contained-list--sm
    .#{$prefix}--search {
    top: 2rem; // sm size header height
  }

  .#{$prefix}--contained-list--on-page.#{$prefix}--contained-list--lg
    .#{$prefix}--search {
    top: 4rem; // lg size header height
  }

  .#{$prefix}--contained-list--on-page.#{$prefix}--contained-list--xl
    .#{$prefix}--search {
    top: 4.5rem; // xl size header height
  }

  .#{$prefix}--contained-list .#{$prefix}--search .#{$prefix}--search-input {
    background-color: $ui-background;
    border-bottom: 1px solid $ui-03;
  }

  .#{$prefix}--contained-list
    .#{$prefix}--search
    .#{$prefix}--search-close::before {
    display: none;
  }

  .#{$prefix}--contained-list .#{$prefix}--search .#{$prefix}--search-close {
    border-right: 2px solid transparent;
    outline: none;

    &:focus {
      @include focus-outline('outline');
    }
  }

  .#{$prefix}--contained-list
    .#{$prefix}--search
    .#{$prefix}--search-input
    ~ .#{$prefix}--search-close:hover {
    border-bottom: 1px solid transparent;
  }

  .#{$prefix}--contained-list
    .#{$prefix}--search
    .#{$prefix}--search-input:focus
    ~ .#{$prefix}--search-close:hover {
    border: 2px solid $focus;
    border-left: 0;
    outline: none;
  }

  .#{$prefix}--contained-list--on-page + .#{$prefix}--contained-list--on-page {
    margin-top: $spacing-05;
  }

  .#{$prefix}--contained-list--on-page .#{$prefix}--contained-list__header {
    @include type-style('heading-01');

    background-color: $ui-background;
    height: 3rem;
    border-bottom: 1px solid $ui-03;
    color: $text-01;
  }

  .#{$prefix}--contained-list--on-page.#{$prefix}--contained-list--sm
    .#{$prefix}--contained-list__header {
    height: 2rem;
  }

  .#{$prefix}--contained-list--on-page.#{$prefix}--contained-list--lg
    .#{$prefix}--contained-list__header {
    height: 4rem;
  }

  .#{$prefix}--contained-list--on-page.#{$prefix}--contained-list--xl
    .#{$prefix}--contained-list__header {
    height: 4.5rem;
  }

  // Disclosed variant
  .#{$prefix}--contained-list--disclosed .#{$prefix}--contained-list__header {
    @include type-style('label-01');

    background-color: $ui-01;
    height: 2rem;
    color: $text-02;
  }

  .#{$prefix}--contained-list-item {
    position: relative;
    display: list-item;
    list-style: none;
  }

  .#{$prefix}--contained-list-item:not(:first-of-type) {
    margin-top: -1px;
  }

  .#{$prefix}--contained-list-item__content {
    box-sizing: border-box;
  }

  .#{$prefix}--contained-list-item--clickable
    .#{$prefix}--contained-list-item__content {
    @include button-reset;

    text-align: left;
    transition: background-color 150ms;
  }

  .#{$prefix}--contained-list-item__content,
  .#{$prefix}--contained-list-item--clickable
    .#{$prefix}--contained-list-item__content {
    @include type-style('body-short-01');

    // Vertical padding centers body-short-01 in the row height
    padding: 0.875rem $spacing-05;
    color: $text-01;
    min-height: 3rem; // md size default
  }

  .#{$prefix}--contained-list--sm
    .#{$prefix}--contained-list-item__content,
  .#{$prefix}--contained-list--sm
    .#{$prefix}--contained-list-item--clickable
    .#{$prefix}--contained-list-item__content {
    min-height: 2rem; // 32px
    padding-top: 0.375rem; // (32px - 20px) / 2 = 6px
    padding-bottom: 0.375rem;
  }

  .#{$prefix}--contained-list--lg
    .#{$prefix}--contained-list-item__content,
  .#{$prefix}--contained-list--lg
    .#{$prefix}--contained-list-item--clickable
    .#{$prefix}--contained-list-item__content {
    min-height: 4rem; // 64px
    padding-top: 1.375rem; // (64px - 20px) / 2 = 22px
    padding-bottom: 1.375rem;
  }

  .#{$prefix}--contained-list--xl
    .#{$prefix}--contained-list-item__content,
  .#{$prefix}--contained-list--xl
    .#{$prefix}--contained-list-item--clickable
    .#{$prefix}--contained-list-item__content {
    min-height: 4.5rem; // 72px
    padding-top: 1.625rem; // (72px - 20px) / 2 = 26px
    padding-bottom: 1.625rem;
  }

  .#{$prefix}--contained-list-item:not(:last-of-type)::before {
    position: absolute;
    background-color: $ui-03;
    height: 1px;
    content: '';
    bottom: 0;
    left: 0;
    right: 0;
  }

  .#{$prefix}--contained-list--inset-rulers
    .#{$prefix}--contained-list-item:not(:last-of-type)::before {
    left: $spacing-05;
    right: $spacing-05;
  }

  .#{$prefix}--contained-list-item--clickable
    .#{$prefix}--contained-list-item__content:not(:disabled):hover {
    background-color: $hover-ui;
  }

  .#{$prefix}--contained-list-item--clickable
    .#{$prefix}--contained-list-item__content:not(:disabled):active {
    background-color: $active-ui;
  }

  .#{$prefix}--contained-list-item--clickable
    .#{$prefix}--contained-list-item__content:disabled {
    color: $disabled-02;
    cursor: not-allowed;
  }

  .#{$prefix}--contained-list-item--clickable
    .#{$prefix}--contained-list-item__content:focus {
    outline: none;
  }

  .#{$prefix}--contained-list-item--clickable
    .#{$prefix}--contained-list-item__content:focus::after {
    @include focus-outline('outline');

    position: absolute;
    content: '';
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .#{$prefix}--contained-list-item--with-action
    .#{$prefix}--contained-list-item__content {
    padding-right: $spacing-10;
  }

  .#{$prefix}--contained-list__action,
  .#{$prefix}--contained-list-item__action {
    position: absolute;
    display: flex;
    justify-content: flex-end;
    top: 0;
    left: 0;
    right: 0;
    pointer-events: none;
  }

  .#{$prefix}--contained-list__action > *,
  .#{$prefix}--contained-list-item__action > * {
    pointer-events: all;
  }

  .#{$prefix}--contained-list-item--with-icon
    .#{$prefix}--contained-list-item__content {
    display: grid;
    column-gap: $spacing-04;
    grid-template-columns: 1rem 1fr;
  }

  .#{$prefix}--contained-list-item__icon {
    display: inline-flex;
    padding-top: $spacing-01;
  }
}

@include exports('contained-list') {
  @include contained-list;
}