.page-wrapper {
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: 'PT Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    border-radius: 4px;
    border: 1px solid var(--Main2);
    color: #fff;
    background-color: var(--Main2);
    outline: none;
    transition: 0.2s;
    text-align: center;
    text-decoration: none;
    padding: 2px 12px;
    min-height: 48px;

    &:hover {
      background-color: var(--Subsidiary);
      border-color: var(--Subsidiary);
    }

    // Цвет кнопок
    &.green {
      background-color: var(--Green);
      border-color: var(--Green);
      color: #fff;

      &:hover {
        background-color: var(--DarkGreen);
        border-color: var(--DarkGreen);
      }

      &.n-border {
        border-color: transparent !important;
        box-shadow: none;
      }
    }

    &.red {
      background-color: var(--Red);
      border-color: var(--Red);
      color: #fff;

      &:hover {
        background-color: var(--DarkRed);
        border-color: var(--DarkRed);
      }

      &.n-border {
        border-color: transparent !important;
        box-shadow: none;
      }
    }

    &.yellow {
      background-color: var(--Yellow);
      border-color: var(--Yellow);
      color: #fff;

      &.n-border {
        border-color: transparent !important;
        box-shadow: none;
      }
    }

    &.blue {
      background-color: var(--Blue);
      border-color: var(--Blue);
      color: #fff;

      &:hover {
        background-color: var(--DarkBlue);
        border-color: var(--DarkBlue);
      }

      &.n-border {
        border-color: transparent !important;
        box-shadow: none;
      }
    }

    &.btn-grey{
      background-color: var(--Bg1);
      border-color: transparent !important;
      color: var(--Main1);

      &:hover {
        background-color: #E5E5E5;
      }
    }

    // Цвет кнопок

    &.btn-outline {
      background-color: transparent;
      color: var(--Main2);

      &:hover {
        background-color: var(--Bg2);
        color: var(--Subsidiary);
        border-color: var(--Subsidiary);

        svg {
          &.fill {
            path {
              fill: var(--Subsidiary);
            }

            circle {
              fill: var(--Subsidiary);
            }

            &-rect {
              rect {
                fill: var(--Subsidiary);
              }
            }
          }

          &.stroke {
            path {
              stroke: var(--Subsidiary);
            }

            circle {
              stroke: var(--Subsidiary);
            }

            &-rect {
              rect {
                stroke: var(--Subsidiary);
              }
            }
          }
        }
      }

      &.active {
        color: #fff !important;
        background-color: var(--Main2);
      }

      &.n-border {
        border-color: transparent !important;
      }

      &.green {
        background-color: transparent;
        color: var(--Green);

        &:hover {
          background-color: var(--Good);
          color: var(--DarkGreen);
          border-color: var(--DarkGreen);
        }

        &.n-border {
          border-color: transparent !important;
        }
      }

      &.red {
        background-color: transparent;
        color: var(--Red);

        &:hover {
          background-color: var(--Warning);
          color: var(--DarkRed);
          border-color: var(--DarkRed);
        }

        &.n-border {
          border-color: transparent !important;
        }
      }

      &.yellow {
        background-color: transparent;
        color: var(--Yellow);

        &:hover {
          background-color: var(--Attention);
        }

        &.n-border {
          border-color: transparent !important;
        }
      }

      &.blue {
        background-color: transparent;
        color: var(--Blue);

        &:hover {
          background-color: var(--BackgroundBlue);
          color: var(--DarkBlue);
          border-color: var(--DarkBlue);
        }
      }

      &.disabled,
      &:disabled,
      [disabled='disabled'],
      [disabled] {
        background-color: transparent !important;
        border-color: var(--Stroke) !important;
        color: var(--Secondary) !important;

        &:hover {
          background-color: transparent;
        }
      }
    }

    &.icon-only {
      width: 48px;
      min-width: 48px;
      height: 48px;
      padding: 0;
    }

    // Размер кнопок
    &.btn-md {
      padding: 2px 16px;
      min-height: 40px;
      font-size: 14px;

      &.icon-only {
        padding: 0;
        width: 40px;
        min-width: 40px;
        height: 40px;
      }
    }

    &.btn-sm {
      padding: 2px 8px;
      min-height: 32px;
      font-size: 12px;

      &.icon-only {
        padding: 0;
        width: 32px;
        min-width: 32px;
        height: 32px;
      }
    }

    &.btn-xs {
      padding: 2px 12px;
      min-height: 24px;

      &.icon-only {
        padding: 0;
        width: 24px;
        min-width: 24px;
        height: 24px;
      }
    }

    // Размер кнопок

    &:not(.btn-outline, .btn-tag) {
      svg {
        &.fill {
          path {
            fill: #fff;
          }

          circle {
            fill: #fff;
          }

          &-rect {
            rect {
              fill: #fff;
            }
          }
        }

        &.stroke {
          path {
            stroke: #fff;
          }

          circle {
            stroke: #fff;
          }

          &-rect {
            rect {
              stroke: #fff;
            }
          }
        }
      }
    }

    &-icon {
      font-size: 16px;
      position: relative;
      transition: all .2s ease-in-out;
      display: flex;
      align-items: center;
      justify-content: center;
      outline: 0;
      width: 38px;
      height: 38px;
      min-height: auto;
      border-radius: 100%;
      border: 1px solid fade(#3A3A3A, 80%);
      text-align: center;
      padding: 0;
      background: 0 0;

      &__img {
        max-width: 24px;
        max-height: 24px;
        transition: all .2s ease-in-out;

        &--share {
          max-width: 24px;
          max-height: 24px;
          position: relative;
          left: -2px;
        }
      }
    }    

    &-view {
      -webkit-transition: all .2s ease;
      transition: all .2s ease;
      position: relative;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      display: inline-block;
      border: 1px solid #9c9b9b;

      &.active,
      &:hover {
        border-color: #595858;

        svg {
          stroke: #595858;
        }
      }

      svg {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        -webkit-transition: all .2s ease;
        transition: all .2s ease;
        display: block;
        width: 20px;
        height: 20px;
        stroke: #727272;
      }
    }

    &.with-icon {
      svg {
        margin-right: 8px;
      }

      &-right {
        margin-left: 8px;
      }
    }

    // тег
    &.btn-tag {
      padding: 2px 8px;
      font-size: 12px;
      line-height: 16px;
      font-weight: normal;
      border: none !important;
      box-shadow: none;
      background-color: var(--Bg2);
      color: var(--Main2);

      &:hover {
        background-color: var(--Bg2);
        color: var(--Main2);
      }

      &.active {
        color: #fff !important;
        background-color: var(--Main2);
      }

      svg {
        margin-left: 8px;
      }
    }

    // тег

    @keyframes rotate {
      100% {
        transform: rotate(1turn);
      }
    }

    &.lines-loading {
      position: relative;
      z-index: 0;
      overflow: hidden;
      background: var(--Stroke);
      color: var(--Secondary);
      border: none;

      &:before {
        content: '';
        position: absolute;
        z-index: -2;
        left: -50%;
        top: -50%;
        width: 200%;
        height: 200%;
        background-repeat: no-repeat;
        background-size: 50% 50%, 50% 50%;
        background-position: 0 0, 100% 0, 100% 100%, 0 100%;
        background-image: linear-gradient(var(--Stroke), var(--Stroke)),
          linear-gradient(var(--Main2), var(--Main2)),
          linear-gradient(var(--Stroke), var(--Stroke)),
          linear-gradient(var(--Main2), var(--Main2));
        animation: rotate 3s linear infinite;
      }

      &::after {
        content: '';
        position: absolute;
        z-index: -1;
        left: 1px;
        top: 1px;
        width: calc(100% - 2px);
        height: calc(100% - 2px);
        background: white;
        border-radius: 3px;
      }
    }

    &.disabled,
    &:disabled,
    &[disabled="disabled"],
    &[disabled] {
      background-color: var(--Disabled) !important;
      border-color: var(--Disabled) !important;
      color: var(--Secondary) !important;
      cursor: default;

      &.lines-loading {
        background-color: var(--Stroke) !important;
        border: none;

        &:after {
          background-color: var(--Disabled) !important;
        }
      }

      svg {
        &.fill {
          path {
            fill: var(--Secondary) !important;
          }

          circle {
            fill: var(--Secondary) !important;
          }

          &-rect {
            rect {
              fill: var(--Secondary) !important;
            }
          }
        }

        &.stroke {
          path {
            stroke: var(--Secondary) !important;
          }

          circle {
            stroke: var(--Secondary) !important;
          }

          &-rect {
            rect {
              stroke: var(--Secondary) !important;
            }
          }
        }
      }
    }

    &-nostyle {
      background-color: transparent!important;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: none;

      &:hover {
        background-color: transparent!important;
      }
    }
  }
}