.config {
  .group {
    margin: 5rem;

    h3 {
      text-align: center;
    }

    .guildpfp {
      width: 50px;
      height: 50px;
      border-radius: 100%;
    }

    label {
      margin-right: 10px;
    }

    .box {
      transition: 0.3s;
      transition-timing-function: ease-out;
      background-color: rgba(0, 0, 0, 0.5);
      border: 2px solid transparent;
      border-radius: 4px;
      padding: 1rem;
      max-width: 1100px;
      margin: 1rem auto;
      width: 100%;

      &.effect {
        svg {
          padding: 0 1rem;

          path {
            transition: 0.1s;
            transform: translateX(100%);
            opacity: 0;
          }
        }

        &:hover {
          transition: 1s;
          transition-delay: 0.1s;
          background-color: rgba(0, 0, 0, 0.4);
          border: 2px solid rgba(255, 255, 255, 0.5);

          svg path {
            transition: 0.5s;
            transition-delay: 0.1s;
            transition-timing-function: ease-out;
            transform: translateX(0);
            opacity: 1;
          }
        }
      }
    }

    .sub {
      margin-left: 10px;

      &.disabled {
        pointer-events: none;
        opacity: 0.5;
      }
    }
  }
}
