@use '../bootstrap/init' as bs;
@use '../mixins';

// fill button style
.btn.btn-fill {
  position: relative;
  display: flex;
  justify-content: space-between;
  min-width: 130px;
  padding: 0px;
  overflow: hidden;
  color: white;
  text-align: center;
  background-color: rgba(lighten(black, 15%), 0.5);
  border: none;

  &:not(:disabled) {
    cursor: pointer;
  }

  .btn-label {
    position: relative;
    z-index: 1;
    padding: 9px 15px;
    color: white;
    text-decoration: none;
  }

  .btn-label-text {
    position: relative;
    z-index: 1;
    margin: auto;
    color: white;
    text-align: center;
    text-decoration: none;
  }

  // effect
  .eff {
    position: absolute;
    top: -50px;
    left: 0px;
    z-index: 0;
    width: 100%;
    height: 100%;
    transition: all 0.5s ease;
  }

  &:hover {
    .eff {
      top: 0;
    }
  }
}

// define disabled button w/o pointer-events, see _override-bootstrap.scss
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
  &.grw-pointer-events-none {
    pointer-events: none;
  }
}
