﻿/*
    Used to manage styles for specific blocks.

    1. HTML Content - block to edit HTML on a page
    2. My Account - Used on external sites for setting person details
    3. Lava Debug - Used to style the lava debug panel
    4. Social Tools - Used for showing social media links
*/


// 1. HTML Content
// -------------------------

.htmlcontent-edit-header {
  padding: @spacing-sm-px @spacing-md-px 0 @spacing-md-px;

  .html-content-approve {
    float: right;
    margin-top: 4px;
  }
}

.codeeditor-header {
  /*position: absolute;
    top: -4px;
    right: 0;*/

  .picker-mergefield {
    float: right;
  }

  .picker .picker-label {
    padding: 2px 6px;
  }
}


// 2. My Account
// -------------------------
.my-account {
  margin-bottom: @spacing-md-px;

  .photo img {
    width: 100%;
  }
}

// 3. Lava Debug
// -------------------------
.lava-debug {
  margin-top: 24px;
  clear: both;

  code {
    color: @state-info-text;
    background-color: darken(@state-info-bg, 5%);
  }

  p {
    margin-bottom: 10px;
    font-weight: normal !important;

    &.attributes {
      margin-bottom: 0;
    }
  }

  .lava-debug-key {
    font-weight: @font-weight-semibold;
  }

  .panel.panel-lavadebug {
    border: 0;

    .panel-heading {
      color: @state-info-text;
      cursor: pointer;
      background-color: darken(@state-info-bg, 3%);
      border: 0;

      &.collapsed i:before {
        content: "\f078";
      }
    }

    .panel-body {
      background-color: lighten(@state-info-bg, 3%);
    }
  }
}

// 4. Social Tools
// -------------------------
.socialsharing {
  padding: 0;
  margin-top: 12px;

  li {
    display: inline-block;

    .socialicon {
      padding: 8px 6px;
      font-family: FontAwesome;
      color: #fff;
      border-radius: 20px;

      &:hover {
        text-decoration: none;
      }
    }

    .socialicon-facebook {
      background-color: #4c66a4;
    }

    .socialicon-twitter {
      background-color: #2c77ba;
    }

    .socialicon-email {
      background-color: #209904;
    }

    .socialicon-calendar {
      background-color: #f00;
    }
  }
}
