@import '../variables.scss';

.ctrl {
  height: $buttonHeight;
  padding: 0 24px;
  border-radius: $corner;
  border-width: 1px;
  border-style: solid;
  font-size: $tx5;
  font-weight: 400;
  box-sizing: border-box;
  display: inline-flex;
  vertical-align: middle;
  align-items: center; // centers icons if they are a child element
  justify-content: center;
  -webkit-user-select: none; // quick clicks will now not highlight
}

.btn {
  @extend .ctrl;
  cursor: pointer;
  font-weight: 700;
  transition: border 0.15s ease;
  text-align: center;

  &:hover:not(.btnRadio, .btnAsLink),
  &:focus:not(.btnRadio, .btnAsLink) {
    text-decoration: none;
    cursor: pointer;
  }

  &:focus:not(.btnRadio) {
    outline: 0;
  }

  &.form {
    // use when buttons are inline with form elements and should match their size
    height: $inputHeight + 2;
  }

  &.btnProcessing {
    position: relative;

    .spinner {
      display: none;
    }

    &.processing {
      pointer-events: none;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: inherit;
        z-index: 1;
      }

      .spinner {
        position: absolute;
        display: block;
        top: 50%;
        left: 50%;
        right: 0;
        bottom: 0;
        background-color: inherit;
        transform: translate(-50%, -50%);
        border-radius: inherit;
        width: 25px;
        height: 25px;
        z-index: 1;
      }
    }
  }

  .icon {
    // use this for icons that are inline in a button in front of text
    width: 1.5em;
    height: 1.5em;
    margin-right: 0.5em;
    display: inline-flex;
    align-content: center;
  }
}

.btnTxt {
  @extend .btn;
  text-align: left;
  border: none;
  background: none;
}

.btnTxtOnly {
  @extend .btnTxt;
  height: auto;
  display: inline;
  font-size: inherit;
  vertical-align: inherit;
  align-items: inherit;
  justify-content: inherit;
  padding: 0;
}

.btnAsLink {
  @extend .btnTxtOnly;
  font-weight: inherit;
  text-decoration: underline;

  &:hover {
    text-decoration: underline;
  }
}

.iconBtn {
  //this button has only an icon in it
  @extend .btn;
  font-size: 1.8rem;
  padding: 0 12px;
  width: $buttonHeight;

  &.form {
    width: $inputHeight;
  }
}

.flexBtnWrapper {
  .btnFlx {
    // see styleSheet.html for example usage.
    // use for buttons in the new 'flex' style with more padding and use css flex.
    @extend .btn;
    min-height: 48px;
    height: auto;
    padding: 25px;
    border-radius: 0px;
    border-width: 1px;
    border-style: solid;
    flex-grow: 1;
    flex-basis: 0;
    margin: 0 -1px -1px -1px;

    & + .btnFlx {
      margin-left: 0;
    }
  }

  .contentBox & .btnFlx:first-child {
    border-bottom-left-radius: 2px;
  }

  .contentBox & .btnFlx:last-child {
    border-bottom-right-radius: 2px;
  }

  &.flexBtnTop {
    // use for flexButtons on the vertical top side of the container
    .btnFlx {
      border-radius: 0;
      border-top: none;
      padding: 0;
      height: 48px;
      display: inline-flex;
      align-items: center;
      font-weight: 400;

      & > * {
        // Set text to the same height as icons to prevent wobble on hover.
        // If the text or icons are a different size, override this.
        line-height: 16px;
      }

      &.underlineOnly.active,
      &:hover,
      &:focus {
        border-bottom-width: 2px;
      }
      &.underlineOnly.active {
        font-weight: 700;
      }
    }
  }

  button {
    // this will not work well for multi-line button text.
    // todo: is there a solution that would work with that?
    line-height: 0;
  }
}

.btnHg {
  @extend .btn;
  font-size: $tx2b;
  height: 56px;
}