button,
.button,
input[type="submit"],
a {
  background: none;
  border: none;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  user-select: none;
  text-decoration: none;

  form {
    display: inline-block;
  }

  [data-id="error"] {
    display: none !important; // Hide the default core message, english only with a weird message
  }

  &.button {
    padding: 9px 20px;
    border-radius: 16.5px;
    height: 33px;
    text-decoration: none;

    &.rounded {
      border-radius: 50%;
      font-size: 18px;
      padding: 16.5px;
      height: 29px;
      width: 29px;
      display: flex;
      align-items: center;
      justify-content: center;
      &::before {
        font-size: 18px;
      }
    }
    &.icon {
      padding: 8px 20px;
      &::before {
        font-size: 15px;
      }
    }
    &.text-semibold {
      *,
      & {
        font-weight: 600;
      }
    }
    &.text-bold {
      *,
      & {
        font-weight: 700;
      }
    }
    &.text-uppercase {
      *,
      & {
        text-transform: uppercase;
      }
    }
    &.color-primary {
      background-color: white;
      *,
      & {
        color: var(--color-primary);
      }
      &.bordered {
        border: 1px solid var(--color-primary);
      }
      &:hover {
        background-color: var(--color-primary);

        *,
        & {
          color: white;
        }
      }
    }
    &.color-secondary {
      background-color: white;

      *,
      & {
        color: var(--color-secondary);
      }
      &.bordered {
        border: 1px solid var(--color-secondary);
      }
      &:hover {
        background-color: var(--color-secondary);
        color: white;

        *,
        & {
          color: white;
        }
      }
    }
    &.color-third {
      color: var(--color-third);
      background-color: white;

      *,
      & {
        color: var(--color-third);
      }
      &.bordered {
        border: 1px solid var(--color-third);
      }
      &:hover {
        background-color: var(--color-third);

        *,
        & {
          color: white;
        }
      }
    }
    &.color-heading {
      background-color: white;

      *,
      & {
        color: var(--color-heading);
      }
      &.bordered {
        border: 1px solid var(--color-heading);
      }
      &:hover {
        background-color: var(--color-heading);
        color: white;

        *,
        & {
          color: white;
        }
      }
    }
    &.color-disabled {
      cursor: not-allowed;
      background-color: white;

      *,
      & {
        color: var(--color-text);
      }
      &.bordered {
        border: 1px solid var(--color-text);
      }
      &:hover {
        background-color: var(--color-text);

        *,
        & {
          color: white;
        }
      }
    }
    &.reversed {
      &.color-primary {
        background-color: var(--color-primary);

        *,
        & {
          color: white;
        }
        &:hover {
          background-color: white;

          *,
          & {
            color: var(--color-primary);
          }
          &.bordered {
            border: 1px solid var(--color-primary);
          }
        }
      }
      &.color-secondary {
        background-color: var(--color-secondary);

        *,
        & {
          color: white;
        }
        &:hover {
          background-color: white;

          *,
          & {
            color: var(--color-secondary);
          }
          &.bordered {
            border: 1px solid var(--color-secondary);
          }
        }
      }
      &.color-third {
        background-color: var(--color-third);

        *,
        & {
          color: white;
        }
        &:hover {
          background-color: white;

          *,
          & {
            color: var(--color-third);
          }
          &.bordered {
            border: 1px solid var(--color-third);
          }
        }
      }
      &.color-heading {
        background-color: var(--color-heading);

        *,
        & {
          color: white;
        }
        &:hover {
          background-color: white;

          *,
          & {
            color: var(--color-heading);
          }
          &.bordered {
            border: 1px solid var(--color-heading);
          }
        }
      }
      &.color-disabled {
        cursor: not-allowed;
        background-color: var(--color-text);

        *,
        & {
          color: white;
        }
        &.bordered {
          border: 1px solid white;
        }
        &:hover {
          background-color: white;
          border: 1px solid var(--color-text);

          *,
          & {
            color: var(--color-text);
          }
        }
      }
    }
  }
}

/* Styles for solid-link inside solid-action */

.children-link {
  &-button * {
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    user-select: none;
    padding: 9px 20px;
    border-radius: 16.5px;
    height: 33px;
  }

  &-rounded * {
    border-radius: 50%;
    font-size: 18px;
    padding: 16.5px;
    height: 29px;
    width: 29px;
    display: flex;
    align-items: center;
    justify-content: center;

    &::before {
      font-size: 18px;
    }
  }

  &-icon * {
    padding: 8px 20px;

    &::before {
      font-size: 15px;
    }
  }

  &-text-semibold {
    *,
    & {
      font-weight: 600;
    }
  }

  &-text-bold {
    *,
    & {
      font-weight: 700;
    }
  }

  &-text-uppercase {
    *,
    & {
      text-transform: uppercase;
    }
  }

  &-color-primary {
    * {
      background-color: white;

      *,
      & {
        color: var(--color-primary);
      }

      &:hover {
        background-color: var(--color-primary);

        *,
        & {
          color: white;
        }
      }
    }

    &.bordered * {
      border: 1px solid var(--color-primary);
    }
  }

  &-color-secondary {
    * {
      background-color: white;

      *,
      & {
        color: var(--color-secondary);
      }

      &:hover {
        background-color: var(--color-secondary);
        color: white;

        *,
        & {
          color: white;
        }
      }
    }

    &.bordered * {
      border: 1px solid var(--color-secondary);
    }
  }

  &-color-third {
    * {
      color: var(--color-third);
      background-color: white;

      *,
      & {
        color: var(--color-third);
      }

      &:hover {
        background-color: var(--color-third);

        *,
        & {
          color: white;
        }
      }
    }

    &.bordered * {
      border: 1px solid var(--color-third);
    }
  }

  &-color-heading {
    * {
      background-color: white;

      *,
      & {
        color: var(--color-heading);
      }

      &:hover {
        background-color: var(--color-heading);
        color: white;

        *,
        & {
          color: white;
        }
      }
    }

    &.bordered * {
      border: 1px solid var(--color-heading);
    }
  }

  &-color-disabled {
    * {
      cursor: not-allowed;
      background-color: white;

      *,
      & {
        color: var(--color-text);
      }

      &:hover {
        background-color: white;

        *,
        & {
          color: var(--color-text);
        }
      }
    }

    &.bordered * {
      border: 1px solid var(--color-text);
    }
  }

  &-reversed {
    &.color-primary {
      * {
        background-color: var(--color-primary);
        border: 1px solid var(--color-primary);

        *,
        & {
          color: white;
        }

        &:hover {
          background-color: white;

          *,
          & {
            color: var(--color-primary);
          }
        }
      }

      &.bordered *:hover {
        border: 1px solid var(--color-primary);
      }
    }

    &.color-secondary {
      * {
        background-color: var(--color-secondary);
        border: 1px solid var(--color-secondary);

        *,
        & {
          color: white;
        }

        &:hover {
          background-color: white;

          *,
          & {
            color: var(--color-secondary);
          }
        }
      }

      &.bordered *:hover {
        border: 1px solid var(--color-secondary);
      }
    }

    &.color-third {
      * {
        background-color: var(--color-third);
        border: 1px solid var(--color-third);

        *,
        & {
          color: white;
        }

        &:hover {
          background-color: white;

          *,
          & {
            color: var(--color-third);
          }
        }
      }

      &.bordered *:hover {
        border: 1px solid var(--color-third);
      }
    }

    &.color-heading {
      * {
        background-color: var(--color-heading);
        border: 1px solid var(--color-heading);

        *,
        & {
          color: white;
        }

        &:hover {
          background-color: white;

          *,
          & {
            color: var(--color-heading);
          }
        }
      }

      &.bordered *:hover {
        border: 1px solid var(--color-heading);
      }
    }

    &.color-disabled {
      * {
        cursor: not-allowed;
        background-color: var(--color-text);

        *,
        & {
          color: white;
        }

        &:hover {
          background-color: var(--color-text);

          *,
          & {
            color: white;
          }
        }
      }

      &.bordered * {
        border: 1px solid white;
      }
    }
  }
}