/*****************************************/
/* Customizer control spacing style
/*****************************************/

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

.customize-control-bloglo-spacing {
  .bloglo-control-wrap {
    position: relative;

    & > ul {
      padding-top: 6px;
      display: none;
      width: 100%;
      align-items: flex-start;

      &.active {
        display: flex;
      }
    }

    .reset-defaults {
      position: absolute;
      top: -18px;
      right: 0;
      margin-right: 0;
    }
  }

  .spacing-control-wrap {
    width: 20%;
    margin: 0;

    input,
    button {
      display: block;
      font-size: 12px;
      padding: 4px 0;
      width: 100%;
      height: 32px;
      border: 1px solid;
      border-color: #ddd;
      border-left-width: 0;
      border-radius: 0;
      text-align: center;
      box-shadow: none !important;
    }

    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    &:first-child input {
      border-left-width: 1px;
      border-radius: 3px 0 0 3px;
    }

    .bloglo-spacing-label {
      display: block;
      color: #808890;
      font-size: 10px;
      padding-top: 4px;
      font-style: normal;
      text-transform: uppercase;
      font-weight: 400;
      text-align: center;
    }

    input:focus + .bloglo-spacing-label {
      color: #232323;
    }

    .spacing-link-values {
      border: 1px solid #ddd;
      border-left-width: 0;
      padding: 0;
      outline: none;
      border-radius: 0 3px 3px 0;
      cursor: pointer;

      span {
        display: block;
        width: 100%;
        height: 30px;
        line-height: 30px;
        font-size: 16px;
        border-radius: 0 2px 2px 0;
        color: #808890;
      }

      &:hover span {
        color: #232323;
      }

      .bloglo-spacing-linked {
        display: none;
        color: #0073aa !important;
      }

      &.unlinked {
        .bloglo-spacing-unlinked {
          display: none;
        }

        .bloglo-spacing-linked {
          display: block;
        }
      }
    }
  }
}