.preferencesProfile {
  display: grid;
  gap: 1em;

  img {
    border-radius: 10px;
    width: 200px;
  }

  label {
    .name {
      display: flex;
      align-items: center;
      color: var(--secondaryTextColor);
    }

    .horizontal-err {
      padding: 2px 5px;
      font-size: 0.8em;
      margin-left: 5px;
      background: #ee4740;
    }

    svg {
      font-size: 0.8em;
      fill: var(--secondaryTextColor);
    }

    .name > p {
      margin: 0 5px;
      font-family: "Roboto Condensed Regular", Arial;
    }

    input {
      font-family: "Roboto Regular", Arial;
      transition: background 0.3s ease-in-out;
      margin-top: 10px;
      background: var(--tertiaryColor);
      outline: none;
      border: none;
      border-radius: 5px;
      padding: 10px 20px;
      color: var(--primaryTextColor);
      width: 100%;
      height: 40px;
      overflow: hidden;
      white-space: nowrap;

      &:focus,
      &:hover {
        background: var(--quaternaryColor);
      }
    }
  }

  .options {
    display: flex;
    gap: 1em;
  }
}
