@use '../abstracts' as *;

/* Molecule - buttons - / + */

.m-minus-plus {
  $this: &;
  display: inline-flex;
  justify-content: center;
  align-items: center;

  &__btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: toRem(34);
    height: toRem(34);
    border-width: toRem(2);
    border-style: solid;
    @include outlineOnFocus();

    &.-minus {
      border-radius: 50% 0 0 50%;
      transform: translateX(2px);

      #{$this}__btn__sign {
        position: relative;
        height: 3px;
        &:before {
          content: '';
          display: inline-block;
          position: absolute;
          top: 0;
          left: 0;
          width: 6px;
          height: 3px;
          margin-left: toRem(-3);
        }
      }
    }
    &.-plus {
      border-radius: 0 50% 50% 0;
      transform: translateX(-2px);
      #{$this}__btn__sign {
        position: relative;
        width: 12px;
        height: 12px;
        &:before,
        &:after {
          content: '';
          position: absolute;
        }

        // vertical line
        &:before {
          top: 0;
          left: 50%;
          width: 3px;
          height: 100%;
          margin-left: toRem(-1.5);
        }
        // horizontal line
        &:after {
          top: 50%;
          left: 0;
          width: 100%;
          height: 3px;
          margin-top: toRem(-1.5);
        }
      }
    }

    &:disabled {
      cursor: not-allowed;
    }
  }
}