/*
 *
 *  IN LOCO
 *  www.inlocomedia.com
 *
 *  Copyright 2016 - All Rights Reserved.
 *
 *  -------- SUPERNOVA ---------
 *       buttons sass file
 *  ----------- *** ------------
 *
 */


@import "buttons_variables";
@import "../../globals/mixins/mixins";



// Buttons

.sn-button {
  position: relative;
  display: inline-block;
  background: 0 0;
  border: none;
  border-radius: $default-button-border-radius;
  color: $default-button-color-text;
  margin: 0;
  height: $default-button-height;
  width: auto;
  min-width: $default-button-min-width;
  padding: $default-button-padding;
  font-size: $default-button-font-size;
  line-height: $default-button-line-height;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
  overflow: hidden;
  outline: none;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
  will-change: all;
  transition: $default-button-transition;

  i {
    vertical-align: middle;
  }

  i ~ span {
    margin-left: $default-button-content-margin;
  }

  &:hover, &:active {
    @include button-hover-shadow();
  }
  &:active {
    background-color: $default-button-active-color;
  }

  &.sn-button--no-hover {
    &:hover, &:active {
      box-shadow: none;
    }
  }


  // Button sizes

  &.sn-button--xs {
    height: $default-button-xs-height;
    min-width: $default-button-xs-min-width;
    padding: $default-button-xs-padding;
    font-size: $default-button-xs-font-size;
    line-height: $default-button-xs-line-height;
    i {
      font-size: $default-button-xs-icon-font-size;
    }
    i ~ span {
      margin-left: $default-button-xs-content-margin;
    }
  }

  &.sn-button--sm {
    height: $default-button-sm-height;
    min-width: $default-button-sm-min-width;
    padding: $default-button-sm-padding;
    font-size: $default-button-sm-font-size;
    line-height: $default-button-sm-line-height;
    i {
      font-size: $default-button-sm-icon-font-size;
    }
    i ~ span {
      margin-left: $default-button-sm-content-margin;
    }
  }

  &.sn-button--lg {
    height: $default-button-lg-height;
    min-width: $default-button-lg-min-width;
    padding: $default-button-lg-padding;
    font-size: $default-button-lg-font-size;
    line-height: $default-button-lg-line-height;
    i {
      font-size: $default-button-lg-icon-font-size;
    }
    i ~ span {
      margin-left: $default-button-lg-content-margin;
    }
  }


  // Button Full Width

  &.sn-button--full-width {
    width: 100%;
  }

  // Button Raised

  &.sn-button--raised {
    background: $default-button-primary-color;
    @include button-shadow();
    &:hover, &:active {
      @include button-hover-shadow();
    }
    &:hover {
      background-color: $default-button-hover-color;
    }
    &:active {
      background-color: $default-button-active-color;
    }
    &:disabled {
      background-color: $default-button-primary-color-disabled !important;
    }

    &.sn-button--no-hover {
      &:hover, &:active {
        @include button-shadow();
      }
    }
  }

  // Button Colored

  &.sn-button--colored {
    background-color: $button-primary-color-alt;
    color: $button-primary-color-text;
    @include button-shadow();
    &:hover, &:active {
      @include button-hover-shadow();
    }
    &:hover {
      background-color: $button-hover-color-alt;
    }
    &:active {
      background-color: $button-active-color-alt;
    }
    &:disabled {
      background-color: $default-button-primary-color-disabled !important;
    }

    &.sn-button--no-hover {
      &:hover, &:active {
        @include button-shadow();
      }
    }
  }

  // Button Accent

  &.sn-button--accent {
    background-color: $button-primary-accent-alt;
    color: $button-primary-accent-text;
    @include button-shadow();
    &:hover, &:active {
      @include button-hover-shadow();
    }
    &:hover {
      background-color: $button-hover-accent-alt;
    }
    &:active {
      background-color: $button-active-accent-alt;
    }
    &:disabled {
      background-color: $default-button-primary-color-disabled !important;
    }

    &.sn-button--no-hover {
      &:hover, &:active {
        @include button-shadow();
      }
    }
  }

  // Button Disabled

  &:disabled {
    @include button-disabled-shadow();
    color: $default-button-disabled-color-text !important;
    cursor: auto;
  }

}


// Button Group

.sn-button__group {
  .sn-button {
    margin: $default-button-group-margin-value;
  }
  .sn-button:first-child {
    margin-left: 0;
  }
  .sn-button:last-child {
    margin-right: 0;
  }
}

.sn-button--toggle {
  border-radius: $default-button-border-radius * 6;
  background: $default-body-background-color;
  color: $default-button-disabled-color-text;

  &:hover {
    box-shadow: 0 0 0 0;
  }

  &.sn-button--toggle--active {
    background-color: $button-primary-accent-alt;
    color: $button-primary-accent-text;
  }
}