@import "../../style_config/config";

.JDbtn {
  // border: $button-border;
  border-radius: $button-radius;
  display: inline-block;
  height: $button-height;
  line-height: 100%;
  outline: 0;
  padding: $button-padding;
  text-transform: uppercase;
  vertical-align: middle; 
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  color: $button-color;
  background-color: $button-bgColor;
  text-align: center;
  letter-spacing: $button-letter-spacing;
  @extend %z-depth-1;
  transition: background-color 0.2s ease-out;
  cursor: pointer;
  border:none;


  &__contents {
    display:flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
  }

  &.JDwaves-effect {
    overflow:hidden;
  }
  // Flot
  &--left {
    float: left
  }

  &--right {
    float: right;
  }

  &.JDbtn--white {
    color:white;
  }

  &.JDbtn--grey {
    background-color: $grey-level1;
    border: 1px solid $grey-opacity1;
    &:hover {
      background-color: $grey-level2;
    }
  }

  // MODE


  @include colorBg--prefixer(":not(:disabled)");

  &.JDbtn--transparent {
    background-color: transparent;
    &:hover {
      background-color: $grey-opacity1;
    }
  }

  // Colors
  &--text-white {
    color:white!important;
  }
  
  // TODO: 왼쪽 아이콘은 아직 없음
  &__icon {
    line-height: inherit;
    margin-left: $buttons-icon-margin;
    float: right;
  
    &--left {
      float: left;
      order: -1;
      margin-left: 0;
      margin-right: $buttons-icon-margin;
    }
  }

  &:hover {
    background-color: $button-bgColor-hover;
    @extend %z-depth-1-half;
  }

  // Disabled shared style

  &:disabled {
    background-color: $button-disabled-background;
    box-shadow: none;
    color: $button-disabled-color;
    cursor: default;

    * {
      pointer-events: none;
    }

    &:hover {
      background-color: $button-disabled-background;
      color: $button-disabled-color;
    }
  }
  
  
  // Large button
  &--large {
    height: $button-large-height;
    line-height: $button-large-height;
    padding: $button-large-padding;
    font-size: $button-large-font-size;
    
    .JDbtn__icon {
      font-size: $button-large-icon-font-size;
    }
  }

  //long button
  &--long {
    width: 100%;
    .JDbtn__icon {
      float: none;
    }
  }

  // Small button
  &--small {
    padding: $button-small-padding;
    font-size: $button-small-font-size;
    
    .JDbtn__icon {
      margin-left: $buttons-small-icon-margin;
      
      &--left {
        float: left;
        margin-left: 0;
        margin-right: $buttons-small-icon-margin;
      }
      
    }
  }
  
  // Flat button
  &--flat {
    box-shadow: none;
    background-color: white;
    color: $button-flat-color;
    cursor: pointer;
    
    &.JDbtn--white {
      color:white;
    }
    
    &.JDbtn--primary:not(:disabled) {
      background-color: $primary-color;
    }
    
    &:disabled {
      color: $button-flat-disabled-color;
      cursor: default;
    }
    
    &:hover {
      background-color: $grey-level1;
      box-shadow: none;
    }
  }

  &--toogleOn.JDbtn {
    background-color: $primary-color;
    color: $primary-color-on;
  }

}


// border
#root,.ReactModalPortal {
  .JDbtn--border {
    background-color: white;
    border: 1px solid $grey-level1;
    box-shadow:none;

    &:hover {
      background-color: $grey-level1;
    }

    &.JDbtn {
      @include colorBorder--prefixer(":not(:disabled)");
      @include colorText--prefixer(":not(:disabled)");
    }
  }
}