.gra-btn {
  &,
  &:link,
  &:visited {
    $color-button-font: $white;
    display: inline-flex;
    height: $el-height;
    align-items: center;
    justify-content: center;
    border: 0;
    background-color: $color-main;
    border-radius: $border-radius;
    color: $color-button-font;
    cursor: pointer;
    font-family: inherit;
    font-size: $el-font-size;
    font-weight: $font-bold;
    letter-spacing: 0.08rem;
    line-height: 1;
    padding-block: 0;
    padding-inline: $content-padding-inline;
    text-align: center;
    text-transform: uppercase;
    user-select: none;
    white-space: nowrap;
    @include moder($modes) {
      background-color: mode("colorMain");
      color: mode("colorFontButton");
    }

    &:not([disabled]):hover {
      opacity: 0.8;
    }

    &:not([disabled]):focus {
      box-shadow: $el-box-shadow;
      outline: none;
    }

    &.disabled,
    &[disabled] {
      cursor: not-allowed;
      opacity: 0.2;
    }

    &.gra-btn-outline {
      border: 1px solid $color-main;
      background-color: transparent;
      color: $color-main;
      @include moder($modes) {
        background-color: mode("transparentColor");
        color: mode("colorMain");
      }

      &:hover {
        opacity: 0.7;
      }
    }

    &.gra-btn-blue {
      background-color: $color-blue;

      &:focus {
        box-shadow: $el-box-shadow-blue;
      }

      &.gra-btn-outline {
        border: 1px solid $color-blue;
        background-color: transparent;
        color: $color-blue;
      }

      &.gra-btn-clear {
        background-color: transparent;
        color: $color-blue;
      }
    }

    &.gra-btn-yellow {
      background-color: $color-yellow;

      &:focus {
        box-shadow: $el-box-shadow-yellow;
      }

      &.gra-btn-outline {
        border: 1px solid $color-yellow;
        background-color: transparent;
        color: $color-yellow;
      }

      &.gra-btn-clear {
        background-color: transparent;
        color: $color-yellow;
      }
    }

    &.gra-btn-green {
      background-color: $color-green;

      &:focus {
        box-shadow: $el-box-shadow-green;
      }

      &.gra-btn-outline {
        border: 1px solid $color-green;
        background-color: transparent;
        color: $color-green;
      }

      &.gra-btn-clear {
        background-color: transparent;
        color: $color-green;
      }
    }

    &.gra-btn-red {
      background-color: $color-red;

      &:focus {
        box-shadow: $el-box-shadow-red;
      }

      &.gra-btn-outline {
        border: 1px solid $color-red;
        background-color: transparent;
        color: $color-red;
      }

      &.gra-btn-clear {
        background-color: transparent;
        color: $color-red;
      }
    }

    &.gra-btn-small {
      height: $el-height-s;
      font-size: $el-font-size-s;
      padding-inline: $space-m;
    }

    &.gra-btn-large {
      height: $el-height-l;
      font-size: $el-font-size-l;
    }

    &.gra-btn-clear {
      background-color: transparent;
      color: $color-main;
      padding-inline: $space-m;
      @include moder($modes) {
        background-color: mode("transparentColor");
        color: mode("darkButtonBackground");
      }
    }

    &.gra-btn-full-width {
      width: 100%;
    }
  }
}