.v-button {
  background-image: none;
  box-shadow: none;
  text-shadow: none;

  @extend %button, %size, %extender-color;

  &::before {
    height: auto !important;
  }

  &::after {
    background: none;
    transition: none;
  }

  &:focus::after {
    border: none;
    box-shadow: none;
    background: none;
  }

  // MapColor
  @each $type in get("type") {
    @each $vaadin-color-name, $color in get("vaadin.color-map") {
      $selector: if($type==fill, "&.#{$vaadin-color-name}", "&.#{$type}.#{$vaadin-color-name}");
      #{$selector} {
        @extend %#{$type}-#{"" + $color};
        @extend %customize-#{$type}-#{"" + $color};
      }
    }
  }

  &:hover {
    &::after {
      background-color: transparent;
    }
  }

  //WithIcon
  img.v-icon {
    min-width: auto;
    width: auto;
    height: size(get("size.medium.icon-container") / 2);
    top: size(get("size.medium.icon-container") / 4);
    margin-left: size(get("size.medium.icon-container") / 4);
  }

  .v-icon {
    @extend %size;

    position: absolute;
    top: 0;
    left: size(-1px);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-width: auto;
    width: 100%;
  }

  .v-icon + .v-button-caption {
    margin-left: 0;
    padding-left: size(get("size.medium.icon-container") - get("element.button.size.medium.padding"));

    &:empty {
      padding: 0;
    }
  }

  &.icon-only {
    width: inherit;
  }

  &.icon-align-right {
    .v-icon {
      left: auto;
      right: 0;
      margin-left: 0;
    }

    .v-icon + .v-button-caption {
      padding-left: 0;
      padding-right: size(get("size.medium.icon-container") - get("element.button.size.medium.padding"));

      &:empty {
        padding: 0;
      }
    }

    img.v-icon {
      margin-right: size(get("size.medium.icon-container") / 4);
    }
  }

  @each $size, $value in get("size") {
    &.#{$size} {
      .v-icon {
        @extend %size-#{$size};

        min-width: size(get("size."+$size+".icon-container")) !important;
      }

      .v-icon + .v-button-caption {
        padding-left: size(get("size."+$size+".icon-container") - get("element.button.size."+$size+".padding"));
      }

      img.v-icon {
        height: size(get("size."+$size+".icon-container") / 2);
        top: size(get("size."+$size+".icon-container") / 4);
        margin-left: size(get("size."+$size+".icon-container") / 4);
        min-width: 0 !important;
        width: size(get("size."+$size+".icon-container") / 2);
      }

      &.icon-align-right {
        img.v-icon {
          margin-right: size(get("size."+$size+".icon-container") / 4);
        }

        .v-button-caption {
          padding-left: 0;
        }
      }
    }
  }

  &.lbs-imagebtn {
    width: size(get("size.medium.icon-container"));

    @each $size, $value in get("size") {
      &.#{$size} {
        width: size(get("size."+$size+".icon-container"));
      }
    }
  }

  // MapSize
  @each $size, $value in get("vaadin.size-map") {
    &.#{$size} {
      @extend %size-#{$value};
      @extend %padding-button-#{$value};

      .v-icon {
        @extend %size-#{$value};

        min-width: size(get("size."+$value+".icon-container") * 0.7) !important;
      }

      .v-icon + .v-button-caption {
        padding-left: size(get("size."+$value+".icon-container") - get("element.button.size."+$value+".padding"));
      }

      img.v-icon {
        height: size(get("size."+$value+".icon-container") / 2);
        top: size(get("size."+$value+".icon-container") / 4);
        margin-left: size(get("size."+$value+".icon-container") / 4);
        min-width: 0 !important;
        width: size(get("size."+$value+".icon-container") / 2);
        left: size(-1px);
      }

      &.icon-align-right {
        img.v-icon {
          margin-right: size(get("size."+$value+".icon-container") / 4);
        }

        .v-button-caption {
          padding-left: 0;
        }
      }

      &.lbs-imagebtn {
        width: size(get("size."+$value+".icon-container")) !important;
      }
    }
  }
}

.lbs-menubtn {
  .menubutton-menu {
    padding: 0 !important;
    min-width: size(get("size.medium.icon-container") * 0.7);
    width: size(get("size.medium.icon-container") * 0.7);

    .v-icon {
      width: size(get("size.medium.icon-container") * 0.7);
    }
  }

  @each $size, $value in get("size") {
    &.#{$size} {
      .vbutton {
        @extend %size-#{$size};
        @extend %padding-button-#{$size};

        .v-icon {
          @extend %size-#{$size};

          min-width: size(get("size."+$size+".icon-container") * 0.7) !important;
          width: size(get("size."+$size+".icon-container") * 0.7) !important;
        }

        .v-button-wrap {
          span.v-icon {
            min-width: size(get("size."+$size+".icon-container") * 0.7) !important;
          }
        }
      }

      .menubutton-menu {
        min-width: size(get("size."+$size+".icon-container") * 0.7) !important;
        width: size(get("size."+$size+".icon-container") * 0.7) !important;
      }
    }
  }
}
