/* ======================================================
STANDARDKNAPPAR SOM ANVÄNDS PÅ GREPPA
====================================================== */

/* ==============================
STANDARD
============================== */
body {
   .env-button {
      background-color: #fff;      /* RGB(248,245,237) */
      color: #0d2b38;                 /* RGB(13,43,56) */
      border: 1px solid #0d2b38;      /* kontur i mörkblå */
      cursor: pointer;
      border-radius: 2px;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.625rem 1rem;
      transition: background-color .2s ease;

      &:hover,
      &:focus,
      &:active {
         background-color: #ceecf9;    /* RGB(206,236,249) */
         border: 1px solid #0d2b38;
      }
   }

   /* ==============================
   PRIMÄR
   ============================== */
   .env-button--primary {
      background-color: #418b73;      /* RGB(65,139,115) */
      color: #ffffff;
      border: 1px solid #418b73;
      cursor: pointer;
      border-radius: 2px;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.625rem 1rem;
      transition: background-color .2s ease;

      &:hover,
      &:focus,
      &:active {
         background-color: #0d3730;    /* RGB(13,55,48) */
      }
   }

   /* ==============================
   FRAMGÅNG (Success)
   ============================== */
   .env-button--success {
      background-color: #2d6a81;      /* RGB(45,106,129) */
      color: #ffffff;
      border: 1px solid #2d6a81;
      cursor: pointer;
      border-radius: 2px;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.625rem 1rem;
      transition: background-color .2s ease;

      &:hover,
      &:focus,
      &:active {
         background-color: #0d2b38;    /* RGB(13,43,56) */
      }
   }

   /* ==============================
   SEKUNDÄR
   ============================== */
   .env-button--secondary {
      background-color: #4f5153;
      border: 1px solid #4f5153;
      color: #ffffff;
      cursor: pointer;
      border-radius: 2px;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.625rem 1rem;
      transition: background-color .2s ease;

      &:hover,
      &:focus,
      &:active {
         background-color: #2a2e32;
      }
   }
}

/* ======================================================
LEGACY-MAPPNING – gamla Greppa-klasser och SiteVision-knappar
====================================================== */

/* Standardknapp → motsvarar .env-button */
.gre-button-large,
.gre-button-normal,
.gre-button-mini,
.sv-login-portlet a.normal,
.sv-defaultFormTheme input[type="button"],
.sv-defaultFormTheme input[type="submit"],
.sv-defaultFormTheme input[type="reset"] {
   @extend .env-button;
}

/* Primärknapp → motsvarar .env-button--primary */
a.env-button.env-button--primary {
   @extend .env-button--primary;
}

/* Petrol / Framgång → motsvarar .env-button--success */
.gre-button-large.gre-petrol,
.gre-button-normal.gre-petrol,
.gre-button-mini.gre-petrol,
.gre-petrol,
a.env-button.env-button--success {
   @extend .env-button--success;
}

/* ==============================
STORLEKAR
============================== */
.gre-button-large,
.sv-login-portlet a.normal,
.sv-defaultFormTheme input[type="button"],
.sv-defaultFormTheme input[type="submit"],
.sv-defaultFormTheme input[type="reset"] {
   font-size: 1.2em;
   padding: 0.8em 1.5em;
   margin-bottom: 2.5rem;
}

.gre-button-normal {
   font-size: 0.9em;
   padding: 0.7em 1.2em;
   margin-bottom: 0.8em;
}

.gre-button-mini {
   font-size: 0.8em;
   padding: 0.5em 0.8em;
   margin-bottom: 0.6em;
}

/* ==============================
DISABLED-STATE (för alla typer)
============================== */
.gre-button-large:disabled,
.gre-button-large[disabled],
.gre-button-normal:disabled,
.gre-button-normal[disabled],
.gre-button-mini:disabled,
.gre-button-mini[disabled],
.gre-button-large.gre-petrol:disabled,
.gre-button-large.gre-petrol[disabled],
.gre-button-normal.gre-petrol:disabled,
.gre-button-normal.gre-petrol[disabled],
.gre-button-mini.gre-petrol:disabled,
.gre-button-mini.gre-petrol[disabled],
.sv-defaultFormTheme input[type="button"]:disabled,
.sv-defaultFormTheme input[type="submit"]:disabled,
.sv-defaultFormTheme input[type="reset"]:disabled,
.sv-defaultFormTheme input[type="button"][disabled],
.sv-defaultFormTheme input[type="submit"][disabled],
.sv-defaultFormTheme input[type="reset"][disabled] {
   opacity: .6;
   pointer-events: none;
}

/* ==============================
Rensa native-stil på input-knappar
============================== */
.sv-defaultFormTheme input[type="button"],
.sv-defaultFormTheme input[type="submit"],
.sv-defaultFormTheme input[type="reset"] {
   -webkit-appearance: none;
   appearance: none;
}


/* Bank ID*/
.img-bank-id,
.img-nordea,
.img-telia {
   min-width: 8em;
   background-repeat: no-repeat;
   padding-left: 4em;
   background-position: 1em center;
}

/* Bank ID */
.img-bank-id {
   background-image: url("/images/18.3190fc0317178c0b07eac95b/1587038207551/Bank%20id.png");
   background-size: 11%;
}

/* Nordea */
.img-nordea {
   background-image: url("/webdav/images/Assets/Bilder/Inloggningsbild/Nordea.png");
   background-size: 17%;
}

/* Nordea */
.img-telia {
   background-image: url("/webdav/images/Assets/Bilder/Inloggningsbild/Telia.png");
   background-size: 11%;
}

/*  */

.sv-login-portlet a.normal {
   margin-top: 1em;
}