#ccm-inline-toolbar-container {
  box-sizing: border-box;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: opacity 0.3s ease-in;
  width: 100%;
  z-index: $index-level-inline-toolbar; /* same as toolbar */
}

#ccm-inline-toolbar-container.ccm-inline-toolbar-affixed {
  background-color: rgba(0, 0, 0, 0.4);
  padding: 10px 0;
  position: fixed;
  top: 0 !important;
}

.light-tooltip {
  .tooltip-inner {
    background-color: $dropdown-bg;
    border-color: $gray-300;
    box-shadow: $dropdown-box-shadow;
    color: $gray-700;
    font-weight: bold;
  }

  .tooltip-arrow::before {
    border-bottom-color: $dropdown-bg;
    border-top-color: $dropdown-bg;
  }
}

.ccm-ui {
  div.dropdown-menu.ccm-inline-design-dropdown-menu,
  div.ccm-dropdown-menu {
    @include border-radius($dropdown-border-radius);
    background-color: $dropdown-bg;
    border: $dropdown-border-width solid $dropdown-border-color;
    line-height: $line-height-base;
    min-width: 265px;
    padding: 20px;
    text-align: left;

    &.ccm-inline-design-dropdown-menu-doubled {
      min-width: 522px;
    }

    .ui-widget-content {
      border: 0 !important;
    }

    .bootstrap-select {
      .filter-option {
        // Fix https://github.com/concrete5/concrete5/issues/10510
        max-width: 300px;
      }
    }

    .form-label {
      font-size: $font-size-sm;
      font-weight: bold;
      height: 30px;
      line-height: 30px;
      margin: 0;
    }

    .ccm-inline-style-slider-display-value {
      display: inline-block;
      margin-left: 5%;
      text-align: left;
      vertical-align: text-bottom;
      width: 25%;

      input[type='text'] {
        height: 25.1875px;
        margin-bottom: 0;
        margin-top: 0;
        outline: none;
        padding: 0 10px;
        text-align: center;
        width: 100%;

        &.ccm-slider-value-unit-appended {
          width: 80%;
        }
      }
    }

    .ccm-inline-style-sliders {
      display: inline-block;
      vertical-align: middle;
      width: 60%;

      &.ui-slider-horizontal {
        margin-bottom: 15px;
      }
    }

    a.ui-slider-handle {
      background-color: #888 !important;
      border-radius: 7px;
      cursor: pointer;

      &:focus {
        background-color: #666;
        outline: none;
      }
    }

    .ui-slider-horizontal {
      background: #eee;
      border-radius: 4px;
      margin-bottom: 5px;
      margin-top: 5px;
    }

    input[type='text'] {
      border-radius: 3px;
      font-size: $font-size-sm;
      margin-bottom: 15px;
      margin-top: 5px;
      padding: 5px 10px;
    }

    .ccm-inline-select-container {
      position: relative;
    }

    h3 {
      font-size: $font-size-base;
      font-weight: bold;
      margin: 0 0 20px;
    }

    hr {
      border-color: #ccc;
      margin-bottom: 14px;
      margin-top: 14px;
    }
  }
}

/* new styles for new the area and block style customizer toolbar */
.ccm-inline-toolbar {
  background-color: #f7f7f7;
  border-radius: 2px;
  display: table;
  height: 31px;
  line-height: 0;
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
  z-index: $index-level-inline-toolbar;

  fieldset {
    all: unset;
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;

    legend {
      all: unset !important;
      color: #7f8d90 !important;
      font-weight: 600 !important;
      margin-bottom: 5px !important;
    }

    .clearfix {
      clear: both;
    }

    .form-group {
      margin-bottom: 0;
      padding-left: 0 !important;

      .ccm-widget-colorpicker {
        float: right;
      }
    }
  }

  .ccm-inline-style-slider-wrapper {
    clear: both;
    display: block;
    width: 100%;

    .input-group.input-group-sm {
      display: inline-flex;
      height: 34px;
      margin: 0;
      padding: 0;
      width: 38%;

      input {
        margin: 0;
      }
    }

    .input[type='range'] {
      appearance: none;
      appearance: none;
      background: $gray-300;
      background-color: transparent;
      background-image: linear-gradient($primary, $primary);
      background-repeat: no-repeat;
      background-size: 0% 100%;
      height: add($form-range-thumb-height, $form-range-thumb-focus-box-shadow-width * 2);
      padding: 0;
      width: 100%;

      &:focus {
        outline: 0;

        &::-webkit-slider-thumb {
          box-shadow: $form-range-thumb-focus-box-shadow;
        }

        &::-moz-range-thumb {
          box-shadow: $form-range-thumb-focus-box-shadow;
        }
      }

      &::-moz-focus-outer {
        border: 0;
      }

      &::-webkit-slider-thumb {
        @include gradient-bg($form-range-thumb-bg);
        @include border-radius($form-range-thumb-border-radius);
        @include box-shadow($form-range-thumb-box-shadow);
        @include transition($form-range-thumb-transition);
        appearance: none;
        border: $form-range-thumb-border;
        height: $form-range-thumb-height;
        margin-top: ($form-range-track-height - $form-range-thumb-height) * 0.5; // Webkit specific
        width: $form-range-thumb-width;

        &:active {
          @include gradient-bg($form-range-thumb-active-bg);
        }
      }

      &::-webkit-slider-runnable-track {
        @include border-radius($form-range-track-border-radius);
        @include box-shadow($form-range-track-box-shadow);
        background-color: $form-range-track-bg;
        border-color: transparent;
        color: transparent;
        cursor: $form-range-track-cursor;
        height: $form-range-track-height;
        width: $form-range-track-width;
      }

      &::-moz-range-thumb {
        @include gradient-bg($form-range-thumb-bg);
        @include border-radius($form-range-thumb-border-radius);
        @include box-shadow($form-range-thumb-box-shadow);
        @include transition($form-range-thumb-transition);
        appearance: none;
        border: $form-range-thumb-border;
        height: $form-range-thumb-height;
        width: $form-range-thumb-width;

        &:active {
          @include gradient-bg($form-range-thumb-active-bg);
        }
      }

      &::-moz-range-track {
        @include border-radius($form-range-track-border-radius);
        @include box-shadow($form-range-track-box-shadow);
        background-color: $form-range-track-bg;
        border-color: transparent;
        color: transparent;
        cursor: $form-range-track-cursor;
        height: $form-range-track-height;
        width: $form-range-track-width;
      }

      &:disabled {
        pointer-events: none;

        &::-webkit-slider-thumb {
          background-color: $form-range-thumb-disabled-bg;
        }

        &::-moz-range-thumb {
          background-color: $form-range-thumb-disabled-bg;
        }
      }
    }
  }

  > li {
    border-bottom: 1px solid #c4c4c4;
    border-right: 1px solid #e1e1e1;
    border-top: 1px solid #c4c4c4;
    display: table-cell;
    font-size: $font-size-base !important;
    list-style: none;
    margin: 0;
    outline: none;
    padding: 3px 8px;
    vertical-align: middle;
  }

  > li:first-child {
    border-bottom-left-radius: 3px;
    border-left: 1px solid #c4c4c4;
    border-top-left-radius: 3px;
  }

  > li:last-child {
    border-bottom-right-radius: 3px;
    border-right: 0;
    border-top-right-radius: 3px;
  }

  > li.ccm-inline-toolbar-icon-cell {
    padding: 0;
    position: relative;
    text-align: center;
    width: 30px;
  }

  > li.ccm-inline-toolbar-icon-cell > a {
    color: $gray-600;
    cursor: pointer;
    display: block;
    height: 100%;
    text-decoration: none;
    transition: background-color 0.25s ease-in-out;

    i {
      display: inline-block;
      font-size: $font-size-sm;
      line-height: 33px;
    }
  }

  li.ccm-inline-toolbar-icon-cell > a:hover {
    background-color: $gray-200;
  }

  li.ccm-inline-toolbar-icon-selected {
    a,
    .btn,
    .btn:hover
    a:hover {
      background-color: $blue;

      i {
        color: white;
      }
    }
  }

  > li.ccm-inline-toolbar-button {
    background: transparent;
    padding: 0;

    .btn {
      background: #f3f3f3;
      border: 0;
      border-radius: 0;
      color: #333;
      display: inline-block;
      font-size: $font-size-sm;
      height: 33px;
      padding: 0 20px;
      text-align: center;
      width: 100%;

      &.btn-primary {
        background: #4a90e2;
        color: #fff;
      }
    }
  }

  > li.ccm-inline-toolbar-select {
    @include gradient-y(#fff, #f1f1f1);
    padding: 0;

    .form-group {
      all: unset;

      label {
        all: unset;
        color: #333;
        font-size: $font-size-sm;
        font-weight: bold;
        height: 33px;
        line-height: 33px;
        padding: 0 10px;
      }
    }

    .bootstrap-select {
      background: transparent;
      float: right;
      width: auto !important;

      .btn.dropdown-toggle {
        background: transparent;
        border: 0 !important;
        border-radius: 0;
        box-shadow: none !important;
        color: #333;
        display: inline-block;
        font-size: $font-size-sm;
        font-weight: normal !important;
        height: 33px;
        line-height: 33px;
        margin: 0;
        outline: none !important;
        padding: 0 20px;
        text-align: center;
        width: 100%;

        &:hover,
        &[aria-expanded='true'] {
          @include gradient-y(#f3f3f3, #d2d2d2);
          box-shadow: inset 1px 1px 5px -1px rgba(0, 0, 0, 0.35) !important;
          transition: none;
        }
      }
    }
  }

  > li.ccm-inline-toolbar-button-cancel button {
    @include gradient-y(#f3f3f3, #eaeaea);
  }

  > li.ccm-inline-toolbar-button-cancel button:hover {
    background-color: #fff;
    background-image: none;
  }

  > li.ccm-inline-toolbar-button-save {
    border: 1px solid #007cce !important;
  }

  > li.ccm-inline-toolbar-button-save button {
    @include gradient-y(#09f, #0094f6);
    background: #09f;
    color: #fff;
  }

  > li.ccm-inline-toolbar-button-save button:hover {
    background-color: #007cce;
    background-image: none;
  }

  toolbar-section-widget {
    display: none;

    > * {
      display: none;
    }
  }

  li.ccm-inline-toolbar-icon-cell > div.ccm-dropdown-menu {
    display: none;

    &.active {
      box-shadow: $dropdown-box-shadow;
      display: block;
      margin-top: 2px;
      position: absolute;
    }
  }
}
