@import "lib.less";

@active-colour: rgb(175, 50, 50);

.share-active-state {
    outline:none;
    color: @active-colour;
    background-position: 0 -17px;
    span{
        border-color: lighten(@active-colour, 10%);
    }
}

.socialshare{
  
    .open-sans-light;

    >div>a {
    position: relative;
    background: url('/media/img/sandstone/share/sprite.png') 0 8px no-repeat transparent;
    text-decoration: none;
    margin: 0;
    letter-spacing: -0.25px;
    padding: 0 28px 0 16px; 
        color: rgb(72,72,72);
    &:after{
      content: "";
      position: absolute;
      top: 2px;
      right: 0;
      display:block;
      border: 1px solid rgba(0, 0, 0, 0.12);
      background: url('/media/img/sandstone/share/sprite.png') 4px -45px no-repeat rgba(255, 255, 255, 0.95);
      width: 19px;
      height: 19px;
      border-radius: 3px;
      @shadow: 0 0 .25px rgba(0, 0, 0, 0.3), inset 0 -2px rgba(0, 0, 0, 0.1);
      .box-shadow(@shadow);
    }
    &:hover:after,
    &:focus:after{
      background-position: 4px -70px;
      @shadow: 0 0 .25px rgba(0, 0, 0, 0.3), inset 0 -2px rgba(0, 0, 0, 0.1);
      .box-shadow(@shadow);
    }
    &:hover,
    &:focus{.share-active-state;}
    span {
      padding-bottom: 1px;
      border-bottom: 1px dotted rgba(72, 72, 72, 0.4);
    }
    &:focus span{
      outline: 1px dotted rgb(175, 50, 50);
    }
    }

    #share-options {
        display: none;
        position: absolute;
        .border-radius(3px);
        background: #fff;
        list-style: none;
        z-index: 9001;
        @shadow: 0 1px 2px rgba(0,0,0,.1);
        .box-shadow(@shadow);
        ul {
            list-style: none;
            margin: 0;
            padding: 0;
            li {
                margin: 0;
                padding: 0;
            }
        }
    }

    &.open {
    >div>a {
      .share-active-state;
      &:after{
        width: 21px;
        height: 21px;
        border: 0;
        right: 1px;
        @shadow: 0 0 1px rgba(255,255,255,0.6), inset 0 2px .5px 0 rgba(0,0,0,0.35), inset 0 0 5px 0 rgba(170,170,170,0.2);
        .box-shadow(@shadow);
        background-color: rgba(74,74,74,0.1);
        background-position: 5px -68px;
      }
      }
        #share-options {
            display: block;
            margin-top: 12px;
        }
    }
    &.open[data-type="bubbles"] #share-options {
        width: 178px;
        height: 68px;
        padding: 12px 12px 6.5px 12px;
        margin-left: 7px;
        ul {
            li {
                float: left;
                &:nth-child(1) {
                    width: 48px;
                }
                &:nth-child(2) {
                    margin-top:2px;
                }
                &:nth-child(-n+2) {
                    padding-right: 12px;
                }
            }
        }
    }
    &.open[data-type="small-bubbles"] #share-options {
        padding: 12px 6px 6.5px 12px;
        height: 92px;
        width: 80px;
        margin-left: 54px;

        ul {
            li {
                &:nth-child(1) {
                    margin-top: -4px;
                }
                &:nth-child(2) {
                    height: 24px;
                }
                &:nth-child(-n+2) {
                    padding-bottom: 12px;
                }
            }
        }
    }
}
// Hide troublesome FB iframe
.FB_UI_Hidden {
    display: none;
}
