.ios {
  @import (multiple) '../../less/colors-ios.less';
  .list {
    .accordion-item-toggle {
      .item-inner {
        background-size: 8px 13px;
        .ltr({
          background: no-repeat calc(~"100% - 15px") center;
          .svg-background("<svg width='8px' height='13px' viewBox='0 0 8 13' xmlns='http://www.w3.org/2000/svg'><polygon fill='#c7c7cc' transform='translate(1.500000, 6.500000) rotate(-45.000000) translate(-1.500000, -6.500000) ' points='6 11 6 2 4 2 4 9 -3 9 -3 11 5 11'></polygon></svg>");
          padding-right: 35px;
        });
        .rtl({
          padding-left: 35px;
          background-repeat: no-repeat;
          background-position: 15px center;
          .svg-background("<svg width='8px' height='13px' viewBox='0 0 8 13' xmlns='http://www.w3.org/2000/svg'><polygon fill='#c7c7cc' transform='translate(6.500000, 6.500000) rotate(-225.000000) translate(-6.500000, -6.500000) ' points='11 11 11 2 9 2 9 9 2 9 2 11 10 11'></polygon></svg>");
        });
      }
      &.active-state {
        background-color: #d9d9d9;
      }
    }
  }

  .list:not(.media-list) .accordion-item-opened:not(.media-item) .accordion-item-toggle .item-inner,
  .list:not(.media-list) .accordion-item-opened:not(.media-item) > .item-link .item-inner,
  .media-list .accordion-item-opened .accordion-item-toggle .item-title-row,
  .media-list .accordion-item-opened > .item-link .item-title-row,
  .accordion-item-opened.media-item .accordion-item-toggle .item-title-row,
  .accordion-item-opened.media-item > .item-link .item-title-row,
  .links-list .accordion-item-opened > a
  {
    .svg-background("<svg width='13px' height='8px' viewBox='0 0 8 13' xmlns='http://www.w3.org/2000/svg'><polygon fill='#c7c7cc' transform='translate(6.5, 6.5) rotate(-315) translate(-10, -6.5)' points='11 11 11 2 9 2 9 9 2 9 2 11 10 11'></polygon></svg>");
    background-size: 13px 13px;
  }

  // Dark theme
  & when (@includeDarkTheme) {
    .theme-dark {
      .list {
        .accordion-item-toggle {
          .item-inner {
            .ltr({
              .svg-background("<svg width='8px' height='13px' viewBox='0 0 8 13' xmlns='http://www.w3.org/2000/svg'><polygon fill='#434345' transform='translate(1.500000, 6.500000) rotate(-45.000000) translate(-1.500000, -6.500000) ' points='6 11 6 2 4 2 4 9 -3 9 -3 11 5 11'></polygon></svg>");
            });
            .rtl({
              .svg-background("<svg width='8px' height='13px' viewBox='0 0 8 13' xmlns='http://www.w3.org/2000/svg'><polygon fill='#434345' transform='translate(6.500000, 6.500000) rotate(-225.000000) translate(-6.500000, -6.500000) ' points='11 11 11 2 9 2 9 9 2 9 2 11 10 11'></polygon></svg>");
            });
          }
          &.active-state {
            background-color: #363636;
          }
        }
      }

      .list:not(.media-list) .accordion-item-opened:not(.media-item) .accordion-item-toggle .item-inner,
      .list:not(.media-list) .accordion-item-opened:not(.media-item) > .item-link .item-inner,
      .media-list .accordion-item-opened .accordion-item-toggle .item-title-row,
      .media-list .accordion-item-opened > .item-link .item-title-row,
      .accordion-item-opened.media-item .accordion-item-toggle .item-title-row,
      .accordion-item-opened.media-item > .item-link .item-title-row,
      .links-list .accordion-item-opened > a
      {
        .svg-background("<svg width='13px' height='8px' viewBox='0 0 8 13' xmlns='http://www.w3.org/2000/svg'><polygon fill='#434345' transform='translate(6.5, 6.5) rotate(-315) translate(-10, -6.5)' points='11 11 11 2 9 2 9 9 2 9 2 11 10 11'></polygon></svg>");
      }
    }
  }
}