@mixin cell-theme($color) {
  @include e(footer) {
    color: $color;
  }
}

@include b(cell) {
  position: relative;
  overflow: hidden;
  background: var(--cell-background);
  @include cell-theme(var(--cell-description-color));
  @include onepx(top);

  &:after {
    left: var(--cell-line-padding-left);
  }

  @include m(primary) {
    @include cell-theme(var(--theme-primary));
  }

  @include m(info) {
    @include cell-theme(var(--theme-info));
  }

  @include m(success) {
    @include cell-theme(var(--theme-success));
  }

  @include m(warning) {
    @include cell-theme(var(--theme-warning));
  }

  @include m(error) {
    @include cell-theme(var(--theme-error));
  }

  @include m(has-icon) {
    &:after {
      left: r(59);
    }
  }

  @include m(is-link) {
    cursor: pointer;
    user-select: none;

    @include e(inner) {
      &:active {
        background-color: var(--cell-active-background);
      }
    }

    @include e(title) {
      flex: 1;
    }
  }

  @include m(disabled) {
    @include e(body, footer) {
      opacity: var(--disabled-opacity);
    }
  }

  @include e(inner) {
    display: flex;
    align-items: center;
    padding: 0 var(--cell-padding-v);
    font-size: var(--cell-title-font-size);
    min-height: var(--cell-height);
    line-height: var(--cell-title-line-height);

    a {
      text-decoration: none;
    }

    a:hover {
      text-decoration: none;
    }
  }

  @include e(body) {
    flex: 1;
    display: flex;
  }

  @include e(footer) {
    display: flex;
    justify-content: center;
    text-align: right;
    font-size: var(--cell-description-font-size);
  }

  @include e(arrow) {
    margin-left: r(5);

    &:after {
      display: inline-block;
      content: '';
      border-right: var(--cell-arrow-border-width) solid var(--cell-arrow-color);
      border-top: var(--cell-arrow-border-width) solid var(--cell-arrow-color);
      width: var(--cell-arrow-length);
      height: var(--cell-arrow-length);
      transform: rotate(45deg);
    }
  }

  @include e(icon) {
    text-align: center;
    margin-right: r(15);
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      max-width: 100%;
      max-height: 100%;
    }
  }

  @include e(title) {
    width: var(--cell-label-width);
    padding: var(--cell-padding-v) 0;
    overflow: hidden;
    color: var(--cell-title-color);
    font-size: var(--cell-title-font-size);
  }

  @include e(content) {
    flex: 1;
    display: flex;
    align-items: center;
    color: var(--cell-title-color);
  }

  @include e(help) {
    padding: 0 r(15) r(10) r(15);
  }
}