/// button.less - Ethlance Button Component Styling


#ethlance-button() {
  text-color-primary: #color[background-light-accent-2];
  background-primary: #color[secondary];
  background-secondary: #color[primary];
  text-color-disabled: desaturate(#color[secondary], 50%);
  width: 200px;
  height: 50px;
  border-radius: 7px;
  fade-duration: 0.3s;
}


.button {
  @fade-duration: #ethlance-button[fade-duration];

  #mixin.noselect(); // remove text selection
  display: block;
  cursor: pointer;
  width: #ethlance-button[width];
  height: #ethlance-button[height];
  background-color: #ethlance-button[background-primary];
  border-radius: #ethlance-button[border-radius];
  overflow: hidden;
  transition: color @fade-duration, background-color @fade-duration;

  > .button-label {
    #mixin.noselect();
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: #ethlance-button[text-color-primary];
    transition: color @fade-duration, background-color @fade-duration;

    > * {
      transition: color @fade-duration, background-color @fade-duration;
    }
  }

  > .button-icon-label {
    #mixin.noselect();
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    overflow: hidden;
    background-color: #color[purple];
    border-radius: #ethlance-button[border-radius];
    transition: color @fade-duration, background-color @fade-duration;

    > .icon {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-basis: 48px;
      flex-grow: 0;
      flex-shrink: 0;
      height: 100%;
      background-color: #color[dark-blue];
    }

    > .label {
      flex-grow: 1;
      text-align: center;
      color: white;
      font-weight: 700;
      text-align: center;
      font-size: 0.9em;
      line-height: 1.2em;
      padding: 0 0.5em;
      transition: color @fade-duration, background-color @fade-duration;
    }
  }

  &.primary {
    background-color: #color[purple];
    opacity: 0.7;

    &:hover {
      @hover-background-color: #color[dark-blue];
      background-color: @hover-background-color;
      color: white;

      > .button-label {
        color: white;
        > span {
          color: white;
        }
      }

      > .button-icon-label {
        color: white;
        background-color: #color[dark-blue];
        > .icon {
          color: white;
          background-color: #color[purple];
        }

        > .label {
          color: white;
          background-color: @hover-background-color;
        }
      }
    }

    &.active {
      #mixin.box-shadow.button();
      opacity: 1.0;
    }

    &.disabled {
      #mixin.box-shadow.none();
      opacity: 0.7;

      &:hover {
        color: white;
        background-color: #color[purple];
      }
    }
  }

  &.warning {
    background-color: #color[orange];
    opacity: 0.7;
  }
  &.secondary {
    background-color: #ethlance-button[background-secondary];

    &.active {
      #mixin.box-shadow.button();
      @background-color: lighten(#ethlance-button[background-secondary], 20%);
      background-color: @background-color;
    }

    &.disabled {
      opacity: 0.7;
      color: #ethlance-button[text-color-disabled];
      background-color: rgba(0,0,0,0.0);

      > .button-label {
        color: #ethlance-button[text-color-disabled];
      }
    }

    &:hover {
      @hover-background-color: #color[dark-blue];
      background-color: @hover-background-color;

      > .button-icon-label {
        background-color: #color[dark-blue];
        > .icon {
          background-color: #color[purple];
        }

        > .label {
          background-color: @hover-background-color;
        }
      }
    }
  }

  &.large {
    width: #ethlance-button[width] * 1.5;
  }

  &.small {
    width: #ethlance-button[width] * 0.7;
  }

  &.auto {
    width: auto;
  }
}
