// cell size
$cell-size-small: 52px !default;
$cell-size-middle: 80px !default;
$cell-size-large: 92px !default;

// cell size map
$cell-sizes: (
  'small': $cell-size-small,
  'middle': $cell-size-middle,
  'large': $cell-size-large
) !default;

// spliter
$cell-spliter-height: 1px !default;
$cell-spliter-color: $spliter !default;

// background
$cell-background: $white !default;
$cell-background-active: #f5f5f5 !default;

// icon-margin
$cell-icon-margin-right: 12px !default;

// icon-size
$cell-icon-size-small: 20px;
$cell-icon-size-middle: 28px;
$cell-icon-size-large: 32px;
$cell-icon-size-super: 48px;

// icon-size-map
$cell-icon-sizes: (
  'small': $cell-icon-size-small,
  'middle': $cell-icon-size-middle,
  'large': $cell-icon-size-large,
  'super': $cell-icon-size-super
) !default;

// desc
$cell-desc-margin-right: 10px !default;

// padding-horizental
$cell-padding-hor: 16px !default;

$cell-title-gap: 12px !default;

// theme colors
$cell-colors: (
  'brand': $brand
) !default;

$cell-theme-colors: map-merge(
  $map1: $auxiliary-colors,
  $map2: $cell-colors
) !default;

.mx {
  &-cell {
    box-sizing: border-box;
    @include disabled();

    &:last-child:not(.mx-cell--collapse) {
      .mx-cell-spliter {
        background: transparent !important;
      }
    }

    &-header {
      display: flex;
      flex-direction: row;
      align-items: center;
      overflow: hidden;

      padding-left: $cell-padding-hor;

      background-color: $cell-background;

      user-select: none;
      cursor: pointer;

      @each $name, $size in $cell-sizes {
        &--#{$name} {
          height: $size;

          @if ($name == large) {
            .mx-cell-subtitle {
              white-space: normal !important;
              @include multiple-text-ellipsis(2);
            }
          }
        }
      }

      &--active {
        background-color: $cell-background-active;
      }

      &-left {
        display: flex;
        flex-direction: row;
        align-items: center;

        white-space: nowrap;

        &--pdr {
          padding-right: 12px;
        }
      }

      &-right-wrapper {
        flex: 1;

        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow: hidden;

        position: relative;

        padding-right: $cell-padding-hor;
        height: 100%;

        .mx-cell-header-right {
          display: flex;
          flex-direction: row;
          align-items: center;
          overflow: hidden;

          &--stamp {
            align-items: flex-start;
          }

          &-prefix {
            display: flex;
            flex-direction: column;
            justify-content: center;
            overflow: hidden;

            padding-right: 10px;

            &--suffix {
              padding-right: 40px;
            }

            min-width: 40%;

            .mx-cell-title {
              display: flex;
              flex-direction: row;
              align-items: center;
              overflow: hidden;

              &--mgb {
                margin-bottom: $cell-title-gap;
              }

              &-text {
                padding-right: 6px;
                color: $dark-black;
                font-size: $font-size-16;
                @include text-ellipsis();
              }

              &-tag {
                flex: 1;
                white-space: nowrap;
              }
            }

            .mx-cell-subtitle {
              color: $gray;
              font-size: $font-size-12;
              @include text-ellipsis();
            }
          }

          &-middle {
            flex: 1;
            padding-right: $cell-desc-margin-right;
            overflow: hidden;

            &--prefix {
              min-width: 10%;
            }

            .mx-cell-desc {
              font-size: $font-size-14;
              color: $dark-gray;
              text-align: right;
              @include text-ellipsis();

              &--plugin {
                font-size: $font-size-16;
              }

              &--more {
                font-size: $font-size-12;
                color: $gray;
              }
            }
          }

          &-suffix {
            font-size: 0;

            .mx-cell-stamp {
              font-size: $font-size-12;
              color: $gray;
              white-space: nowrap;

              &--small {
                font-size: $font-size-10;
              }
            }

            .mx-cell-collapse {
              transform-origin: center center;
              transition: all $duration $time-function;

              &--collapse {
                transform: rotateZ(90deg);
              }
            }
          }
        }

        .mx-cell-spliter {
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;

          height: 1px;

          background-color: $spliter-gray;

          &--card {
            right: $cell-padding-hor;
          }
        }
      }
    }

    &-body {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      overflow: hidden;

      padding-left: $cell-padding-hor;
      padding-right: $cell-padding-hor;
    }

    &-slide-enter,
    &-slide-leave-to {
      height: 0px;
    }

    &-slide-enter-active,
    &-slide-leave-active {
      transition: height $duration $time-function;
    }
  }
}