/**
* @file
 * Style for cp-operations.
 */


.cp-operations li {
  display: flex;

}


@media only screen and (min-width: 512px) {
  .cp-operations li {

    white-space: nowrap;
  }
}

.cp-operations a,
.cp-operations-container a,
a.cp-operations {
  clear: both;
  display: block;
  line-height: 2.4rem;
}

.cp-operations a::before,
.cp-operations-container a::before,
a.cp-operations::before {
  color: #FFFFFF;
  content: "";
  display: block;
  float: left;
  margin: 0.25rem;
  width: 2rem;
}

.cp-operations-container a.cp-operations-toggle {
  display: none;
}

.cp-operations a::before,
.cp-operations-container a::before,
a.cp-operations::before {
  height: 2rem;
  overflow: hidden;
  min-width:  2rem;
}

/* @media */
@media screen and (min-width:768px) {

  .cp-operations a::before,
  .cp-operations-container a::before,
  a.cp-operations::before {
    height: 2rem;
    overflow: hidden;
  }
  .cp-operations-container {
    display: flex;
    max-height: 2.5rem;
    overflow: hidden;
  }
  .cp-operations-container {
    -webkit-transition: max-height 0.2s;
    -moz-transition: max-height 0.2s;
    transition: max-height 0.2s;
  }

  .cp-operations-container:hover {
    max-height: 3rem;
  }


  .cp-operations-container.expanded {
    max-height: 500px !important;
  }


  .cp-operations-container a.cp-operations-toggle {
    display: block;
    overflow: hidden;
    text-indent: -20rem;
    min-width: 40px;
    width: 40px;
  }
  .cp-operations-container:hover a.cp-operations-toggle::before {
    background: transparent url("../../img/gui/gui-action/gui-action-expand-FFFFFF.svg") 1px 0px no-repeat;
    background-color: var(--custom-color-1-1);
    background-size: 24px 24px;
    width: 2rem;
  }
  .cp-operations-container a.cp-operations-toggle::before {
    background: transparent url("../../img/gui/gui-action/gui-action-expand-FFFFFF.svg") 3px 2px no-repeat;
    background-color: var(--custom-color-1-1);
    background-size: 20px 20px;
  }

  .cp-operations-container a.cp-operations-toggle.expanded::before {
    background: transparent url("../../img/gui/gui-action/gui-action-collapse-FFFFFF.svg") 3px 2px no-repeat;
    background-color: var(--custom-color-1-1);
    background-size: 20px 20px;
  }

}
/* @media */
@media only screen and (min-width: 1200px) {

  .cp-operations-container:hover a.cp-operations-toggle::before {
    background: transparent url("../../img/gui/gui-action/gui-action-expand-FFFFFF.svg") 3px 3px no-repeat;
  background-color: var(--custom-color-1-1);
    background-size: 24px 24px;
  }

  .cp-operations-container a.cp-operations-toggle::before {
    background: transparent url("../../img/gui/gui-action/gui-action-expand-FFFFFF.svg") 5px 5px no-repeat;
  background-color: var(--custom-color-1-1);
    background-size: 20px 20px;
  }

  .cp-operations-container a.cp-operations-toggle.expanded::before {
    background: transparent url("../../img/gui/gui-action/gui-action-collapse-FFFFFF.svg") 5px 5px no-repeat;
  background-color: var(--custom-color-1-1);
    background-size: 20px 20px;
  }
}

/**
 * Operation Links.
 */
.cp-operations a {
  display: flex;
}
.cp-operations a.add::before,
a.add.cp-operations::before {
  background: transparent url("../../img/gui/gui-action/gui-action-add-FFFFFF.svg") center center no-repeat;
  background-color: var(--custom-color-1-1);
}

.cp-operations a.edit::before,
a.edit.cp-operations::before,
.edit.cp-operations a::before {
  background: transparent url("../../img/gui/gui-action/gui-action-edit-FFFFFF.svg") center center no-repeat;
  background-color: var(--custom-color-1-1);
}

.cp-operations a.clone::before,
a.cp-operations.clone::before {
  background: transparent url("../../img/gui/gui-action/gui-action-clone-FFFFFF.svg") center center no-repeat;
  background-color: var(--custom-color-1-1);
  background-size: 1.2rem 1.2rem;
}

.cp-operations a.preview::before,
a.cp-operations.preview::before {
  background: transparent url("../../img/gui/gui-action/gui-action-preview-FFFFFF.svg") center center no-repeat;
  background-color: var(--custom-color-1-1);
}

.cp-operations a.view::before,
a.cp-operations.view::before {
  background: transparent url("../../img/gui/gui-action/gui-action-view-FFFFFF.svg") center center no-repeat;
  background-color: var(--custom-color-1-1);
  background-size: 1.2rem 1.2rem;
}

.cp-operations a.disable::before,
a.cp-operations.disable::before {
  background: transparent url("../../img/gui/gui-action/gui-action-disable-FFFFFF.svg") center center no-repeat;
  background-color: var(--custom-color-1-1);
}

.cp-operations a.user-block::before,
a.cp-operations.user-block::before {
  background: transparent url("../../img/gui/gui-user/gui-user-status-blocked.svg") center center no-repeat;
  background-color: var(--custom-color-1-1);
  background-size: 1.2rem 1.2rem;
}
.cp-operations a.user-enable::before,
a.cp-operations.user-enable::before {
  background: transparent url("../../img/gui/gui-user/gui-user-status-enabled.svg") center center no-repeat;
  background-color: var(--custom-color-1-1);
  background-size: 1.2rem 1.2rem;
}

.cp-operations a.user-chapter::before,
a.cp-operations.user-enable::before {
  background: transparent url("../../img/gui/gui-user/gui-user-chapter-FFFFFF.svg") center center no-repeat;
  background-color: var(--custom-color-1-1);
  background-size: 1.2rem 1.2rem;
}

/* @media */
@media screen and (min-width:768px) {
  .cp-operations-single.cp-operations-processed {
    padding-left: 40px;
  }
}

.cp-operations-margin-bottom {
  margin-bottom: 1rem;
}


@media screen and (max-width:768px) {
  .item-list.cp-operations-container {
    max-height: 100% !important;
  }
}