/*****************************************/
/* Customizer control heading style
/*****************************************/

/**
 * Import configuration file with variables.
 */
@import "../../../../assets/sass/config";

#customize-controls {
  .customize-control.customize-control-bloglo-heading {
    &:after {
      margin-top: 1px;
    }

    .bloglo-heading-top-space {
      height: 12px;
      margin: -17px -12px 0 -12px;
      background-color: #eee;
      border-bottom: 1px solid #ddd;
    }
  }
}

.bloglo-heading-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  background-color: $color_5;
  color: #555d66;
  margin: -16px -12px -2px -12px;
  padding: 14px 12px;
  border-bottom: 1px solid #ddd;

  &.sub-heading {
    margin-top: -6px;
    background-color: rgba(0, 0, 0, 0);
    color: #777;
    border-bottom: none;

    &:after {
      display: none;
    }
  }

  &.toggle-heading:hover {
    cursor: pointer;

    .bloglo-heading-toggle label {
      background-color: #f0f0f0;

      &:before {
        color: #000;
      }
    }
  }

  &.top-spacer {
    margin-top: 0;
  }

  .bloglo-control-heading {
    margin-right: auto;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
  }

  .bloglo-heading-toggle {
    label {
      pointer-events: none;
      margin-left: 6px;
      display: flex;
      align-items: center;
      border-radius: 50%;

      &:before {
        content: "\f140";
        display: block;
        padding: 1px 2px 1px 0px;
        speak: none;
        border-radius: 50%;
        color: #72777c;
        font: normal 20px/1 dashicons;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-decoration: none !important;
      }
    }

    input[type="checkbox"] {
      display: none;

      &:checked + label {
        transform: rotate(180deg);
      }
    }
  }
}