hubl/src/styles/base/buttons.scss

// Button global CSS
solid-delete,
solid-route,
solid-link,
button,
input[type='submit'],
a,
.button {
  background: none;
  border: none;
  cursor: pointer;
  display: inline-block;
  padding: 0;

  &.button {
    padding: 0.55rem 2.5rem;
    border-radius: 100em;

    *,
    & {
      font-size: 1.4rem;
    }

    &.mobile-full-width {
      margin-bottom: 1rem;
      padding-left: 5rem;
      width: -webkit-fill-available;
      width: -moz-available;

      @include breakpoint(lg) {
        margin-bottom: 0;
        padding-left: 2.5rem;
        width: auto;
      }

      &::before {
        margin-left: -2.6rem;

        @include breakpoint(lg) {
          margin-left: 0;
        }
      }
    }

    &.desktop-btn-margin__left {
      margin: 0;

      @include breakpoint(lg) {
        margin-left: 2.2rem;
      }
    }

    &.small {

      *,
      & {
        font-size: 1rem;
      }
    }

    &.text-bold {

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

    &.text-uppercase {

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

    &.rounded {
      border-radius: 50%;
      font-size: 1.8rem;
      padding: 1rem;
      height: 42px;
      width: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
    }

    &.button-link {
      border-radius: 100em;

      *,
      & {
        text-decoration: underline;
      }

      &:hover {
        text-decoration: none;
      }
    }

    &.with-icon::before {
      font-size: 1.6rem;
      margin-right: 1rem;
    }

    &.button-primary{
      background-color: var(--color-white);

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

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

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

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

    &.button-disabled{
      cursor: not-allowed;
      background-color: var(--color-white);

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

      &.bordered, &.button-bordered {
        border: 1px solid var(--color-grey-3);
      }

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

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

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

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

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

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

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

    &.button-complementary {
      color: var(--color-complementary);
      background-color: var(--color-white);

      &.bordered, &.button-bordered {
        border: 1px solid var(--color-complementary);
      }

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

    &.flex {
      display: flex;
    }

    &.reversed {
      &.button-primary {
        background-color: var(--color-primary);

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

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

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

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

      &.button-disabled{
        cursor: not-allowed;
        background-color: var(--color-grey-3);
  
        *,
        & {
          color: var(--color-white);
        }
  
        &.bordered, &.button-bordered {
          border: 1px solid var(--color-white);
        }
  
        &:hover {
          background-color: var(--color-grey-3);
  
          *,
          & {
            color: var(--color-white);
          }
        }
      }

      &.button-secondary {
        background-color: var(--color-secondary);

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

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

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

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

      &.button-complementary {
        background-color: var(--color-complementary);

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

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

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

          &.bordered, &.button-bordered {
            border: 1px solid var(--color-complementary);
          }
        }
      }
    }
  }
}