// Contextual Action Panel
//================================================== //

.modal.contextual-action-panel {
  @include css3(transition, opacity 0.2s, transform 0.2s);

  &.is-animating {
    @include css3(transform, translate3d(0%, 50%, 0));

    opacity: 0;
  }

  .modal-content {
    padding: 0;

    .modal-body-wrapper {
      background: $panel-bg-color;
      padding: 0;
    }
  }

  .modal-header {
    background-color: $contextual-panel-bg;
    border-bottom: 1px solid $contextual-panel-border-color;
    height: 50px;
    padding: 0;

    .flex-toolbar {
      .toolbar-section {
        &.title {
          padding-left: 15px;

          span {
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            vertical-align: middle;
            white-space: nowrap;

            @media (min-width: ($breakpoint-big-phone + 1)) {
              width: 150px;
            }

            @media (min-width: ($breakpoint-phablet + 1)) {
              width: 250px;
            }

            @media (max-width: $breakpoint-big-phone) {
              display: none;
            }
          }
        }

        &.buttonset {
          @media (max-width: ($breakpoint-slim - 25)) {
            width: 100%;
          }
        }

        .separator {
          @media (max-width: ($breakpoint-big-phone - 20)) {
            margin: 3px 0 0;
          }
        }
      }

      &.has-close-button {
        .toolbar-section.search {
          .toolbar-searchfield-wrapper {
            @media (max-width: ($breakpoint-phone-to-tablet - 1)) {
              overflow: hidden;
            }
          }
        }
      }
    }

    .go-back-button {
      display: inline-block;
      width: 34px;
      height: 34px;
      margin-inline-start: 5px;
      vertical-align: middle;

      .go-back {
        svg {
          height: 14px;
          width: 14px;
        }
      }

      + .toolbar {
        display: inline-block;
        width: calc(100% - 42px);

        .title {
          display: none;
        }

        .title-detail {
          display: inline-block;
          margin-inline-start: 5px;
          line-height: 2.7;
        }
      }
    }

    .toolbar {
      .toolbar-searchfield-wrapper:not(.is-open):not(.non-collapsible) {
        border-radius: 0;

        .searchfield {
          height: 34px;
        }
      }

      .title-detail {
        display: none;
      }

      &.searchfield-active {
        .title + .buttonset {
          .toolbar-searchfield-wrapper {
            @media (max-width: ($breakpoint-big-phone + 39)) {
              width: calc(100% - 45px) !important;
            }
          }
        }
      }

      &:not(.has-more-button) .title {
        @media (max-width: ($breakpoint-phone-to-tablet - 1)) {
          width: auto !important;
        }

        + .buttonset {
          @media (max-width: ($breakpoint-phone-to-tablet - 1)) {
            width: calc(100% - 5px) !important;
            height: 41px;
          }
        }
      }

      &:not(.searchfield-active) .toolbar-searchfield-wrapper {
        .searchfield {
          padding-right: 0;
        }
      }
    }
  }

  .flex-toolbar {
    height: inherit;
    margin: 0 auto;
    padding: 0 5px;
  }

  .toolbar {
    height: 50px;
    margin-bottom: 0;

    .title,
    .title-detail {
      font-size: $ids-size-font-lg;
      height: inherit;
      margin-inline-start: 15px;
      top: 0;
    }

    .is-open + .separator {
      margin: 5px 7px 0 19px;
    }

    .separator {
      background-color: $contextual-panel-separator-bg-color;
      margin: 5px 7px 0;
      pointer-events: none; //fixes wierd IE10 over effect
      top: 5px;
    }

    .has-close-button {
      display: inline-block;
      width: calc(100% - 105px);
    }

    .buttonset {
      .toolbar-searchfield-wrapper {
        + .separator {
          margin-left: 12px;
          margin-right: 12px;
        }

        &.is-open + .separator {
          margin-left: 20px;
        }
      }
    }
  }

  .toolbar-section {
    &.buttonset,
    &.search {
      &:last-child {
        padding-right: 0;
      }

      > *:last-child {
        margin-right: 0;
      }
    }
  }

  .toolbar-searchfield-wrapper.is-open {
    .searchfield {
      background-color: $contextual-panel-searchfield-bg-color;
      border-color: $contextual-panel-searchfield-border-color;
    }
  }

  .close-button {
    display: inline-block;

    @media (max-width: ($breakpoint-big-phone - 20)) {
      min-width: 50px;
    }

    .btn {
      margin: 7px 5px 3px 0;
      vertical-align: middle;
    }

    span {
      @media (max-width: ($breakpoint-big-phone - 20)) {
        display: none;
      }
    }
  }

  .buttonset {
    [class^='btn']:last-child {
      margin-inline-end: 10px;
    }
  }

  .btn,
  .btn-tertiary {
    &:hover {
      background-color: $contextual-panel-button-hover-bg-color !important;
    }
  }

  .modal-body {
    padding: 3rem 0;

    &.propagate-style {
      max-height: inherit; 
      max-width: inherit; 
      overflow: inherit;
    }
  
    &.compact {
      padding: 0;
    }

    .field:last-child input,
    .field:last-child textarea {
      margin-bottom: 10px;
    }

    .full-width {
      padding-top: 0;
    }

    textarea {
      @media (max-width: $breakpoint-big-phone) {
        width: 100%;
      }
    }

    &.has-back-button {
      display: flex;
      flex-wrap: nowrap;
    }
  }

  .content-detail,
  .content-main {
    @include transform-transition-list(300ms cubic-bezier(0.17, 0.04, 0.03, 0.94));

    display: flex;
  }
}

html[dir='rtl'] {
  .modal.contextual-action-panel {
    .toolbar-section {
      &.buttonset,
      &.search {
        &:last-child {
          padding-left: 0;
          padding-right: auto;
        }

        > *:last-child {
          margin-left: 0;
          margin-right: auto;
        }
      }
    }

    .modal-header {
      .flex-toolbar {
        .toolbar-section {
          &.title {
            font-size: $ids-size-font-lg;
            padding-left: 0;
            padding-right: 15px;

            h2 {
              font-size: $ids-size-font-lg;
            }
          }
        }
      }
    }
  }
}

@include respond-to(phone) {
  .modal.contextual-action-panel {
    .btn-close .icon {
      width: 16px;
    }

    .toolbar {
      height: 50px;
      margin-bottom: 0;

      .title,
      .title-detail {
        margin-right: 15px;
      }
    }
  }
}