@include export-module('cc-icon-collapse-handle-layout') {
  .co-icon-collapse-handle {

      @include button-small-semi-round($cc-color-light, 25px, 35px);
      display: flex;
      align-items: center !important;
      justify-content: center !important;
      border: 1px solid $cc-color-light-accent;
      cursor: pointer;
      flex-shrink: 0;
      top: 50%;
      transform: translateY(-50%);
      overflow: hidden;

      &.two-arrows {
        co-icon { // smaller icons
          position: relative;
          width: 25px;
          height: 25px;
        }
        co-icon.first { // reposition icons
          top: 10px;
        }
        co-icon.second {
          bottom: 10px;
        }

        &.arrows-orientated-horizontally {
          div.wrap {
            display: flex;
            flex-direction: row;
          }
          co-icon.first { // reposition icons
            left: 10px;
          }
          co-icon.second {
            right: 10px;
          }
        }
      }

      &.vertical {
        transform: rotate(90deg);
        co-icon {
          &.right {
            transform: rotate(0);
          }
          &.bottom {
            transform: rotate(90deg);
          }
          &.left {
            transform: rotate(180deg);
          }
          &.top{
            transform: rotate(270deg);
          }
        }
      }

      &:hover {
        background: $cc-color-action;
        co-icon ::ng-deep {
          [fill] {
            fill: $cc-color-light;
          }
        }
      }

      co-icon {
        width: 35px;
        height: 35px;
        transition: transform 0.2s;
        ::ng-deep [fill] {
          fill : red;
        }
        &.up {
          transform: rotate(0);
        }
        &.right {
          transform: rotate(90deg);
        }
        &.bottom {
          transform: rotate(180deg);
        }
        &.left{
          transform: rotate(270deg);
        }
      }

    div.wrap {
      display: flex;
      flex-direction: column;
    }
  }
}
