@use "../../assets/scss/mixins/_font-size.scss";

.bimdata-btn {
  padding: 0 var(--spacing-unit);
  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: none;
  color: var(--color-primary);
  cursor: pointer;
  font-family: var(--primary-font);
  font-size: 12px;
  transition: all 0.1s ease;
  &:hover {
    transition: all 0.25s ease-in;
  }
  &:focus {
    outline: none;
  }
  &__icon {
    padding: 0;
  }
  /* style BIMDATA BTN RADIUS ------------------ */
  &__radius {
    border-radius: 3px;
  }
  &__square {
    border-radius: 0;
  }
  &__rounded {
    border-radius: 50%;
  }
  /* style BIMDATA BTN FILL -------------------- */
  &__fill {
    background-color: var(--color-white);
    justify-content: center;
    /* style BIMDATA BTN DEFAULT FILL ---------- */
    &--default {
      box-shadow: var(--box-shadow);
      &:hover {
        background-color: var(--color-silver-light);
      }
    }
    /* style BIMDATA BTN PRIMARY FILL ---------- */
    &--primary {
      background-color: var(--color-primary);
      color: var(--color-white);
      &:hover {
        background-color: var(--color-primary-light);
      }
    }
    /* style BIMDATA BTN SECONDARY FILL ---------- */
    &--secondary {
      background-color: var(--color-secondary);
      color: var(--color-primary);
      &:hover {
        background-color: var(--color-secondary-light);
      }
    }
    /* style BIMDATA BTN GREY FILL ------------- */
    &--granite {
      background-color: var(--color-granite);
      color: var(--color-white);
      &:hover {
        background-color: var(--color-granite);
      }
    }
    /* style BIMDATA BTN RED FILL ------------- */
    &--high {
      background-color: var(--color-high);
      color: var(--color-white);
      &:hover {
        background-color: var(--color-high-light);
      }
    }
    /* style BIMDATA BTN GREEN FILL ------------- */
    &--success {
      background-color: var(--color-success);
      color: var(--color-white);
      &:hover {
        background-color: var(--color-success-light);
      }
    }
    /* style BIMDATA BTN FILL BTN ICON --------- */
    &--btn-icon {
      svg {
        margin: 0 6px;
      }
    }
    &:disabled {
      background-color: var(--color-silver-dark);
      color: var(--color-white);
      cursor: auto;
    }
  }
  &__ripple {
    background-position: center;
    transition: background 0.8s;
    &--default {
      background-color: transparent;
      color: var(--color-primary);
      &:hover {
        background: transparent
          radial-gradient(circle, transparent 1%, var(--color-silver-light) 1%)
          center/15000%;
      }
      &:active:not(:disabled) {
        background-color: var(--color-silver-light);
        background-size: 100%;
        transition: background 0s;
      }
    }
    &--primary {
      background-color: var(--color-primary);
      color: var(--color-white);
      &:hover {
        background: var(--color-primary)
          radial-gradient(circle, transparent 1%, var(--color-primary) 1%)
          center/15000%;
      }
      &:active:not(:disabled) {
        background-color: var(--color-primary-light);
        background-size: 100%;
        transition: background 0s;
      }
    }
    &--secondary {
      background-color: var(--color-secondary);
      color: var(--color-primary);
      &:hover {
        background: var(--color-secondary)
          radial-gradient(circle, transparent 1%, var(--color-secondary) 1%)
          center/15000%;
      }
      &:active:not(:disabled) {
        background-color: var(--color-secondary-light);
        background-size: 100%;
        transition: background 0s;
      }
    }
    &--granite {
      background-color: var(--color-granite);
      color: var(--color-white);
      &:hover {
        background: var(--color-granite)
          radial-gradient(circle, transparent 1%, var(--color-granite) 1%)
          center/15000%;
      }
      &:active:not(:disabled) {
        background-color: var(--color-granite-light);
        background-size: 100%;
        transition: background 0s;
      }
    }
    &--high {
      background-color: var(--color-high);
      color: var(--color-white);
      &:hover {
        background: var(--color-high)
          radial-gradient(circle, transparent 1%, var(--color-high) 1%)
          center/15000%;
      }
      &:active:not(:disabled) {
        background-color: var(--color-high-light);
        background-size: 100%;
        transition: background 0s;
      }
    }
    &--success {
      background-color: var(--color-success);
      color: var(--color-white);
      &:hover {
        background: var(--color-success)
          radial-gradient(circle, transparent 1%, var(--color-success) 1%)
          center/15000%;
      }
      &:active:not(:disabled) {
        background-color: var(--color-success-light);
        background-size: 100%;
        transition: background 0s;
      }
    }
    &:disabled {
      background-color: var(--color-silver-dark);
      color: var(--color-white);
      cursor: auto;
    }
  }
  &__outline {
    justify-content: center;
    border: 1px solid;
    &--default {
      border-color: var(--color-silver);
      color: var(--color-primary);
      &:hover {
        background-color: var(--color-silver-light);
      }
    }
    &--primary {
      border-color: var(--color-primary);
      color: var(--color-primary);
      &:hover {
        background-color: var(--color-primary-lighter);
      }
    }
    &--secondary {
      border-color: var(--color-secondary);
      color: var(--color-primary);
      &:hover {
        background-color: var(--color-secondary-lighter);
      }
    }
    &--granite {
      border-color: var(--color-granite);
      color: var(--color-granite);
      &:hover {
        background-color: var(--color-silver-light);
      }
    }
    &--high {
      border-color: var(--color-high);
      color: var(--color-high);
      &:hover {
        background-color: var(--color-high-lighter);
      }
    }
    &--success {
      border-color: var(--color-success);
      color: var(--color-success);
      &:hover {
        background-color: var(--color-success-lighter);
      }
    }
    &:disabled {
      border-color: var(--color-silver-dark);
      color: var(--color-silver-dark);
      cursor: auto;
      &:hover {
        background-color: transparent;
      }
    }
  }
  &__ghost {
    justify-content: center;
    svg {
      display: flex;
      align-items: center;
    }
    &--default {
      color: var(--color-primary);
      &:hover {
        background-color: var(--color-silver-light);
      }
    }
    &--primary {
      color: var(--color-primary);
      &:hover {
        background-color: var(--color-primary-lighter);
      }
    }
    &--secondary {
      color: var(--color-secondary);
      &:hover {
        background-color: var(--color-secondary-lighter);
      }
    }
    &--granite {
      color: var(--color-granite);
      &:hover {
        background-color: var(--color-silver-light);
      }
    }
    &--high {
      color: var(--color-high);
      &:hover {
        background-color: var(--color-high-lighter);
      }
    }
    &--success {
      color: var(--color-success);
      &:hover {
        background-color: var(--color-success-lighter);
      }
    }
    &:disabled {
      color: var(--color-silver-dark);
      cursor: auto;
    }
  }
}