// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

//VARIABLES

$main-color: #7a0033;
$main-color-dark: #66002a;
$secondary-color: #4D3F4B;
$secondary-color-dark: #332832;


//MIXINS

@mixin box-shadow($x-offset: 2px, $y-offset: 3px, $blur: 4px, $spread: 0){
  -webkit-box-shadow: $x-offset $y-offset $blur $spread rgba(0,0,0,0.6);
  -moz-box-shadow: $x-offset $y-offset $blur $spread rgba(0,0,0,0.6);
  box-shadow: $x-offset $y-offset $blur $spread rgba(0,0,0,0.6);
}

@mixin text-glow($x-offset: 0, $y-offset: 0, $blur: 4px, $color: white){
  text-shadow: $x-offset $y-offset $blur $color;
}

@mixin border-radius($radius: 20px){
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

@mixin border-corner-radius($corner, $radius: 20px){
  -webkit-border-#{$corner}-radius: $radius;
  -moz-border-#{$corner}-radius: $radius;
  border-#{$corner}-radius: $radius;
}

@mixin btn($color: $main-color){
  background-color: $color;
  background-image: none;
  border: solid 1px $color;
  @include border-radius();
  @include box-shadow($blur: 6px);
  color: white;
  font-size: 11px;
}

@mixin btn-left($color: $main-color){
  background-color: $color;
  background-image: none;
  @include border-corner-radius(bottom-left);
  @include border-corner-radius(top-left);
  @include border-corner-radius(bottom-right, 0);
  @include border-corner-radius(top-right, 0);
  color: white;
  font-size: 11px;
}

@mixin btn-right($color: $main-color){
  background-color: $color;
  background-image: none;
  @include border-corner-radius(bottom-right);
  @include border-corner-radius(top-right);
  @include border-corner-radius(bottom-left, 0);
  @include border-corner-radius(top-left, 0);
  color: white;
  font-size: 11px;
}

@mixin btn-over($color: $main-color-dark){
  background-color: $color;
  background-image: none;
  @include text-glow();
}


//PLACEHOLDERS

%hidden {
  display: none;
}

%main-btn {
  @include btn();

  &:hover, &:active{
    @include btn-over();
  }
}

%main-btn-left {
  @include btn-left();

  &:hover, &:active{
    @include btn-over();
  }

}

%main-btn-right {
  @include btn-right();

  &:hover, &:active{
    @include btn-over();
  }
}

%secondary-btn {
  @include btn($secondary-color);

  &:hover, &:active{
    @include btn-over($secondary-color-dark);
  }
}

%secondary-btn-left {
  @include btn-left($secondary-color);

  &:hover, &:active{
    @include btn-over($secondary-color-dark);
  }
}

%secondary-btn-right {
  @include btn-right($secondary-color);

  &:hover, &:active{
    @include btn-over($secondary-color-dark);
  }
}


//MAIN CSS

.WikiaSiteWrapper {
  background-image: none;
  background-color: $main-color;
}

.WikiHeader {
  > nav li.marked > a {
    border-top: none;
  }

  .navbackground {
    border-bottom-left-radius: 3px;
    @include box-shadow($blur: 8px);

    div {
      @extend %hidden;
    }
  }
}


a.wikia-button {
  @extend %main-btn;

  .edit-pencil {
    @extend %hidden;
  }


  &.share-button.secondary {
    @extend %secondary-btn;
  }

  &.comments.secondary.talk {
    @extend %secondary-btn;
  }

  &.secondary {
    @extend %secondary-btn;
  }
}

.wikia-menu-button {
  @extend %main-btn;
  margin-left: 5px;

  .drop {
    @extend %main-btn-right;
  }

  &.contribute.secondary.combined {
    @extend %secondary-btn;
    padding-left: 10px;

    .drop {
      @extend %secondary-btn-right;
    }

    .sprite.contribute {
      @extend %hidden;
    }
  }

  &.secondary.control-button {
    @extend %secondary-btn;

    .drop {
      @extend %secondary-btn-right;
    }
  }

  &.wikia-menu-button-submit {
    #wpSave {
      @extend %main-btn-left;
      box-shadow: none;
      margin-left: 0px;
    }
  }


}

#ca-edit {
  @extend %main-btn-left;
  padding-left: 13px;
  padding-right: 10px;

  .edit-pencil {
    @extend %hidden;
  }
}

#wpPreview {
  @extend %secondary-btn-left;

  &.preview_desktop.preview_icon {
    background-color: transparent;
    border: 1px solid #c1c1c1;
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
    color: #606060;
  }
}

a.comments > .commentsbubble {
color: #3A3A3A;;
}

input.css-publish-button {
  @extend %main-btn-left;
  padding-left: 13px;
  padding-right: 10px;
}

.WikiaNotifications li div {
  background-image: none;
  @include border-radius();
  @include box-shadow($blur: 6px);

  &:hover, &:active {
    @include btn-over;
  }
}


.wikia-single-button a, .button, button{
  @extend %main-btn
}