%horizontal-center {
  @include flexbox;
  align-items: center;
}

%flex-center {
  @include flexbox;
  align-items: center;
  justify-content: center;
}

%normal-transition {
  @include transition(all 0.3s ease-in-out);
}

%cover-link {
  position: relative;

  .cover-link {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 3;
  }
}

%overlay-position {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%);
}

%fixed-images {
  position: absolute;
  left: 50%;
  top: 50%;
  object-fit: cover;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
}

%pic-before-hover {
  &::before {
    content: " ";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    transition: all 0.3s ease-in-out;
    background: radial-gradient(
                    circle,
                    rgba(0, 0, 0, 0) 0%,
                    rgba(0, 0, 0, 0.2413165949973739) 50%,
                    rgba(0, 0, 0, 0.4514006286108193) 100%
    );
    opacity: 0;
    z-index: 2;
  }
}

%simple-input {
  border: 2px solid #f1f1f1;
  color: var(--color-2);
  font-size: 18px;
  height: 48px;
  outline: none;
  align-items: center;
  border-radius: 10px;
  padding-right: 15px;
  padding-left: 15px;
}

%simple-btn {
  min-width: 112px;
  height: 48px;
  border: 2px solid #f1f1f1;
  color: var(--color-1);
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: auto;
  background: unset;
  border-radius: 10px;
  transition: all 0.5s ease-in-out;
  text-align: left;

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

  &:disabled {
    filter: grayscale(1);
    opacity: 0.7;
    background-color: #eee;
  }
}

%pastil-color {
  .color-1:hover {
    a {
      border-color: #00b6e3;
    }

    i {
      background: -webkit-linear-gradient(#00b6e3 0%, #81e6ff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .active.color-1 {
    background-color: #e8fcff;

    a {
      border-color: #00b6e3;
    }

    i {
      background: -webkit-linear-gradient(#00b6e3 0%, #81e6ff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .color-2:hover {
    a {
      border-color: #b03bd9;
    }

    i {
      background: -webkit-linear-gradient(#b03bd9 0%, #dcbbff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .active.color-2 {
    background-color: #fef3ff;

    a {
      border-color: #b03bd9;
    }

    i {
      background: -webkit-linear-gradient(#b03bd9 0%, #dcbbff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .color-3:hover {
    a {
      border-color: #fb0;
    }

    i {
      background: -webkit-linear-gradient(#fb0 0%, #ffdd81 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .active.color-3 {
    background-color: #fffbe1;

    a {
      border-color: #fb0;
    }

    i {
      background: -webkit-linear-gradient(#fb0 0%, #ffdd81 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .color-4:hover {
    a {
      border-color: #39b778;
    }

    i {
      background: -webkit-linear-gradient(#39b778 0%, #88f57c 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .active.color-4 {
    background-color: #e7fce7;

    a {
      border-color: #39b778;
    }

    i {
      background: -webkit-linear-gradient(#39b778 0%, #88f57c 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .active.color-5 {
    background-color: #e7fce7;

    a {
      border-color: #c1d4da;
    }

    i {
      background: -webkit-linear-gradient(#c1d4da 0%, #e2e8ef 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}