/* A customizable, versatile button. Should be an <a> element. */

/* [Icons]
 * If .generate-icon class is added, an icon will be added automatically.
 * 
 * You must add one of the classes below to select which icon to use.
 *    .icon-twitter 
 *    .icon-bluesky 
 *    .icon-discord 
 *    .icon-twitter-white
 *    .icon-bluesky-white
 *    .icon-discord-white
 *    .icon-naver-blog
 *    .icon-internal
 *    .icon-download
 *    .icon-camera
 *    .icon-generic-link
 *    .icon-new-tab
 *    .icon-kakao-map
 *    .icon-google-maps
 *    .icon-google-docs
 *    .icon-google-sheets
 *    .icon-google-forms
 *    .icon-google-slides
 *    .icon-witchform
 *    .icon-swap
 *    .icon-table
 *    .icon-list
 *    .icon-undo
 *    .icon-map-pin-heart
 *    .icon-map-pin-home
 *    .icon-lang
 *    .icon-mail
 *    .icon-layer-on
 *    .icon-layer-off
 *    .icon-2d
 *    .icon-3d
 *    .icon-close
 *    .icon-trash
 *    .icon-play
 *    .icon-pause
 *    .icon-code
 * 
 * Alternatively, if .manual-icon class is added,
 *   the first child will be positioned as the icon. 
 * 
 * The size of the icons can be changed using
 *   --lb-icon-size-multiplier
 * CSS variable.
 */

/* [Colors]
 * Add one of the below classes to select the color theme.
 *    .color-twitter 
 *    .color-bluesky 
 *    .color-discord 
 *    .color-naver 
 *    .color-internal
 *    .color-malang-little
 *    .color-malang-one
 *    .color-hanmari
 *    .color-leebyeori
 *    .color-kakao
 *    .color-google
 *    .color-google-docs
 *    .color-google-sheets
 *    .color-google-forms
 *    .color-google-slides
 *    .color-witchform
 * 
 * Alternatively, the colors can be set using CSS variables below:
 *   --lb-color-text
 *   --lb-color-bg
 *   --lb-color-outline (defaults to text color)
 */

/* [Sizes]
 * Add one of the below classes to choose the size.
 *    .square
 *    .padded
 *    .large
 *    .large-padded
 *    .large-square
 */

/* [Shadow]
 * Add .drop-shadow class to add automatic shadows.
 * 
 * The shadow can be customized using CSS variables below:
 *   --lb-ds-opacity: 50%;
 *   --lb-ds-blur: 8px;
 *   --lb-ds-distance: 2px;
 */

/* [Other Options]
 * .inline       to make this an inline link.
 * .borderless   to disable borders 
 * .textless     for textless buttons
 * .icons-big    Make icons larger
 */



.link-button{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:0.2em;
  
  --lb-padding-y:0.4em;
  --lb-padding-x:0.8em;
  --lb-padding-extra:0px;
  --lb-border-width:2px;
  padding-top: calc(var(--lb-padding-y) + var(--lb-padding-extra));
  padding-bottom: calc(var(--lb-padding-y) + var(--lb-padding-extra));
  padding-left: calc(var(--lb-padding-x) + var(--lb-padding-extra));
  padding-right: calc(var(--lb-padding-x) + var(--lb-padding-extra));
  
  text-decoration:none;
  border-radius:0.5em;
  
  --lb-color-text:var(--color-text-auto);
  --lb-color-bg:var(--color-background-auto);
  --lb-color-outline:var(--lb-color-text);
  
  color:var(--lb-color-text);
  background-color:var(--lb-color-bg);
  
  border-color:var(--lb-color-outline);
  border-style:solid;
  border-width: var(--lb-border-width);
  font-weight:700;
  line-height:1.2;
  
  cursor:pointer;
  
  transition-property:background-color,color;
  transition-duration:0.2s;
  
  --lb-icon-offset-multiplier: 1.0;
  --lb-icon-size-multiplier:1.0;
}
.anim-disabled .link-button{
  transition-duration:0s;
}
.link-button.icons-big{
  --lb-icon-size-multiplier:1.2;
}
.link-button.textless.textless{
  justify-content:center;
  padding:0;
}

/* We are using border-box sizing, so removing the border will shrink the button. */
/* We add back the border width to keep the button size consistent. */
.link-button.borderless{
  border-style:none;
  padding-top: calc(var(--lb-padding-y) + var(--lb-padding-extra) + var(--lb-border-width));
  padding-bottom: calc(var(--lb-padding-y) + var(--lb-padding-extra) - 2px + var(--lb-border-width));
  padding-left: calc(var(--lb-padding-x) + var(--lb-padding-extra) + var(--lb-border-width));
  padding-right: calc(var(--lb-padding-x) + var(--lb-padding-extra) + var(--lb-border-width));
}
.link-button:hover{
  background-color:color-mix(in srgb, var(--lb-color-bg) 80%, var(--lb-color-text));
}

.link-button.drop-shadow{
  --lb-ds-opacity: 50%;
  --lb-ds-blur: 8px;
  --lb-ds-distance: 2px;
  box-shadow: 
    var(--lb-ds-distance) var(--lb-ds-distance) 
    var(--lb-ds-blur) 
    rgb(0 0 0 / var(--lb-ds-opacity));
}
.link-button.drop-shadow.padded{
  --lb-ds-blur: 12px;
  --lb-ds-distance: 3px;
}
.link-button.drop-shadow.large{
  --lb-ds-blur: 12px;
  --lb-ds-distance: 3px;
}
.link-button.drop-shadow.large-padded{
  --lb-ds-blur: 16px;
  --lb-ds-distance: 4px;
}

.link-button.square{
  --lb-icon-offset-multiplier:0.6;
  width:2.2em;
  height:2.2em;
}
.link-button.padded{
  --lb-padding-extra:0.3em;
  --lb-icon-offset-multiplier:1.0;
}
.link-button.large{
  font-size:1.3em;
  --lb-icon-offset-multiplier:0.6;
}
.link-button.large-square{
  font-size:1.3em;
  --lb-icon-offset-multiplier:0.6;
  width:2.2em;
  height:2.2em;
}
.link-button.large-padded{
  font-size:1.3em;
  --lb-padding-extra:0.3em;
  --lb-icon-offset-multiplier:0.6;
}

/* Need two .inline to have higher specificity than .large */
.link-button.inline.inline{
  display:inline-flex;
  background:none;
  border:none;
  border-bottom-style:solid;
  border-bottom-width:0.1em;
  border-radius:0;
  padding-left: 0.3em;
  padding-right: 0.3em;
  padding-bottom: 0em;
  padding-top: 0em;
  
   /* In HSL space, 
   *   If    L<20, L+=20
   *   If 20<L<50, L-=15
   *   If 50<L<80, L+=15 
   *   If 80<L   , L-=20
   *   Then clamp L within 0 and 100
   * 
   * Uses some cursed math to mimic conditional statements. 
   * 
   * This will break if the L value sits right in the conditional boundary, 
   *   and Bluesky's primary color just so happens to be at L=50.0% 
   *   so we use cutoffs offset by 0.5 */
  --lb-color-text-inverted: hsl(
    from var(--lb-color-text) 
    h s 
    min(max(calc(
      calc(
          min(max(calc((20.5 - l) * 1000000),0),1) 
        * (l + 30)) +
      calc(
          min(max(calc((l - 20.5) * 1000000),0),1) 
        * min(max(calc((50.5 - l) * 1000000),0),1) 
        * (l - 15)) +
      calc(
          min(max(calc((l - 50.5) * 1000000),0),1) 
        * min(max(calc((80.5 - l) * 1000000),0),1) 
        * (l + 15)) +
      calc(
          min(max(calc((l - 80.5) * 1000000),0),1) 
        * (l - 15))
    ),0),100)
    / alpha);
}

.link-button.inline.inline:hover{
  color:var(--lb-color-text-inverted);
}

.link-button.manual-icon:first-child{
  max-height:1.0em;
  max-width:1.0em;
  transform: scale(var(--lb-icon-size-multiplier));
}

.link-button.generate-icon::before{
  /* For raster icons, use below variable to adjust its size. */
  /* For font icons, use transforms.*/
  --lb-image-icon-size-multiplier:1.0;
  content:"";
  display:block;
  height:calc(1.0em * var(--lb-image-icon-size-multiplier));
  width:calc(1.0em * var(--lb-image-icon-size-multiplier));
  font-size:1.0em;
  margin-right:0.3em;
  background-size: contain;
  background-position:center;
  background-repeat:no-repeat;
  flex-shrink:0;
}
.link-button.textless.generate-icon::before{
  margin-right:0px;
}

.link-button.color-twitter{
  --lb-color-bg:light-dark(
    var(--color-twitter-light-bg),
    var(--color-twitter-dark-bg));
  --lb-color-text:light-dark(
    var(--color-twitter-light-fg),
    var(--color-twitter-dark-fg));
}

.light-mode .link-button.icon-twitter::before{
  background-image:url("/siteicons/X_logo-black_Rsz64px.png");
  --lb-image-icon-size-multiplier:calc(1.0 * var(--lb-icon-size-multiplier));
}
.dark-mode .link-button.icon-twitter::before{
  background-image:url("/siteicons/X_logo-white_Rsz64px.png");
  --lb-image-icon-size-multiplier:calc(1.0 * var(--lb-icon-size-multiplier));
}
.link-button.icon-twitter-white::before{
  background-image:url("/siteicons/X_logo-white_Rsz64px.png");
  --lb-image-icon-size-multiplier:calc(1.0 * var(--lb-icon-size-multiplier));
}
.link-button.color-bluesky{
  --lb-color-bg:light-dark(
    var(--color-bluesky-light-bg),
    var(--color-bluesky-dark-bg));
  --lb-color-text:light-dark(
    var(--color-bluesky-light-fg),
    var(--color-bluesky-dark-fg));
}
.link-button.icon-bluesky::before{
  background-image:url("/siteicons/Bluesky_Logo_Wikipedia_1024px_Rsz64px.png");
  --lb-image-icon-size-multiplier:calc(1.2 * var(--lb-icon-size-multiplier));
}
.link-button.icon-bluesky-white::before{
  background-image:url("/siteicons/Bluesky_Logo_Wikipedia_1024px_White-Rsz64px.png");
  --lb-image-icon-size-multiplier:calc(1.2 * var(--lb-icon-size-multiplier));
}

.link-button.color-discord{
  --lb-color-bg:light-dark(
    var(--color-discord-light-blurple),
    var(--color-discord-dark));
  --lb-color-text:var(--color-discord-blurple);
}
.link-button.icon-discord::before{
  background-image:url("/siteicons/Discord-Symbol-Blurple_Rsz64px.png");
  --lb-image-icon-size-multiplier:calc(1.2 * var(--lb-icon-size-multiplier));
}
.link-button.icon-discord-white::before{
  background-image:url("/siteicons/Discord-Symbol-Purewhite_Rsz64px.png");
  --lb-image-icon-size-multiplier:calc(1.2 * var(--lb-icon-size-multiplier));
}
.link-button.color-naver{
  --lb-color-bg:light-dark(
    var(--color-naver-lighter),
    var(--color-background-dark));
  --lb-color-text:light-dark(
    var(--color-naver-darker),
    var(--color-naver-base));
}
.link-button.icon-naver-blog::before{
  background-image:url("/siteicons/favicon_nblog.png");
  --lb-image-icon-size-multiplier:calc(1.0 * var(--lb-icon-size-multiplier));
}

.link-button.icon-internal::before{
  content:"open_in_browser";
  font-family:'Material Symbols Rounded';
  transform:scale(calc(1.4 * var(--lb-icon-size-multiplier)));
  margin-top:calc(-0.5em * var(--lb-icon-offset-multiplier));
}

.link-button.icon-download::before{
  content:"download";
  font-family:'Material Symbols Rounded';
  transform:scale(calc(1.4 * var(--lb-icon-size-multiplier)));
  margin-top:calc(-0.5em * var(--lb-icon-offset-multiplier));
}

.link-button.icon-camera::before{
  content:"photo_camera";
  font-family:'Material Symbols Rounded';
  transform:scale(calc(1.4 * var(--lb-icon-size-multiplier)));
  margin-top:calc(-0.5em * var(--lb-icon-offset-multiplier));
}

.link-button.icon-generic-link::before{
  content:"link";
  font-family:'Material Symbols Rounded';
  transform:scale(calc(1.4 * var(--lb-icon-size-multiplier)));
  margin-top:calc(-0.5em * var(--lb-icon-offset-multiplier));
}
.link-button.icon-new-tab::before{
  content:"open_in_new";
  font-family:'Material Symbols Rounded';
  transform:scale(calc(1.2 * var(--lb-icon-size-multiplier)));
  margin-top:calc(-0.5em * var(--lb-icon-offset-multiplier));
}
.link-button.icon-swap::before{
  content:"swap_horiz";
  font-family:'Material Symbols Rounded';
  transform:scale(calc(1.4 * var(--lb-icon-size-multiplier)));
  margin-top:calc(-0.5em * var(--lb-icon-offset-multiplier));
}
.link-button.icon-table::before{
  content:"table";
  font-family:'Material Symbols Rounded';
  transform:scale(calc(1.4 * var(--lb-icon-size-multiplier)));
  margin-top:calc(-0.5em * var(--lb-icon-offset-multiplier));
}
.link-button.icon-list::before{
  content:"data_table";
  font-family:'Material Symbols Rounded';
  transform:scale(calc(1.4 * var(--lb-icon-size-multiplier)));
  margin-top:calc(-0.5em * var(--lb-icon-offset-multiplier));
}
.link-button.icon-undo::before{
  content:"undo";
  font-family:'Material Symbols Rounded';
  transform:scale(calc(1.4 * var(--lb-icon-size-multiplier)));
  margin-top:calc(-0.5em * var(--lb-icon-offset-multiplier));
}
.link-button.icon-map-pin-heart::before{
  content:"map_pin_heart";
  font-family:'Material Symbols Rounded';
  transform:scale(calc(1.4 * var(--lb-icon-size-multiplier)));
  margin-top:calc(-0.5em * var(--lb-icon-offset-multiplier));
}
.link-button.icon-map-pin-home::before{
  content:"home_pin";
  font-family:'Material Symbols Rounded';
  transform:scale(calc(1.4 * var(--lb-icon-size-multiplier)));
  margin-top:calc(-0.5em * var(--lb-icon-offset-multiplier));
}
.link-button.icon-lang::before{
  content:"language";
  font-family:'Material Symbols Rounded';
  transform:scale(calc(1.4 * var(--lb-icon-size-multiplier)));
  margin-top:calc(-0.4em * var(--lb-icon-offset-multiplier));
}
.link-button.icon-mail::before{
  content:"mail";
  font-family:'Material Symbols Rounded';
  transform:scale(calc(1.4 * var(--lb-icon-size-multiplier)));
  margin-top:calc(-0.5em * var(--lb-icon-offset-multiplier));
}
.link-button.icon-layer-on::before{
  content:"layers";
  font-family:'Material Symbols Rounded';
  transform:scale(calc(1.4 * var(--lb-icon-size-multiplier)));
  margin-top:calc(-0.5em * var(--lb-icon-offset-multiplier));
}
.link-button.icon-layer-off::before{
  content:"layers_clear";
  font-family:'Material Symbols Rounded';
  transform:scale(calc(1.4 * var(--lb-icon-size-multiplier)));
  margin-top:calc(-0.5em * var(--lb-icon-offset-multiplier));
}
.link-button.icon-3d::before{
  content:"3d";
  font-family:'Material Symbols Rounded';
  transform:scale(calc(1.4 * var(--lb-icon-size-multiplier)));
  margin-top:calc(-0.5em * var(--lb-icon-offset-multiplier));
}
.link-button.icon-2d::before{
  content:"2d";
  font-family:'Material Symbols Rounded';
  transform:scale(calc(1.4 * var(--lb-icon-size-multiplier)));
  margin-top:calc(-0.5em * var(--lb-icon-offset-multiplier));
}
.link-button.icon-close::before{
  content:"close";
  font-family:'Material Symbols Rounded';
  transform:scale(calc(1.4 * var(--lb-icon-size-multiplier)));
  margin-top:calc(-0.4em * var(--lb-icon-offset-multiplier));
}
.link-button.icon-trash::before{
  content:"delete";
  font-family:'Material Symbols Rounded';
  transform:scale(calc(1.4 * var(--lb-icon-size-multiplier)));
  margin-top:calc(-0.5em * var(--lb-icon-offset-multiplier));
}
.link-button.icon-play::before{
  content:"play_arrow";
  font-family:'Material Symbols Rounded';
  transform:scale(calc(1.4 * var(--lb-icon-size-multiplier)));
  margin-top:calc(-0.5em * var(--lb-icon-offset-multiplier));
}
.link-button.icon-pause::before{
  content:"pause";
  font-family:'Material Symbols Rounded';
  transform:scale(calc(1.4 * var(--lb-icon-size-multiplier)));
  margin-top:calc(-0.5em * var(--lb-icon-offset-multiplier));
}
.link-button.icon-code::before{
  content:"code";
  font-family:'Material Symbols Rounded';
  transform:scale(calc(1.4 * var(--lb-icon-size-multiplier)));
  margin-top:calc(-0.5em * var(--lb-icon-offset-multiplier));
}

.link-button.color-internal{
  --lb-color-bg:var(--color-background-auto);
  --lb-color-text:light-dark(
    var(--template-malang-TWI),
    var(--template-malang-TS));
}

.link-button.color-malang-little{
  --lb-color-bg:#2F4575;
  --lb-color-text:#FFF;
}
.link-button.color-malang-one{
  --lb-color-bg:#5f4385;
  --lb-color-text:#FFF;
}

.link-button.color-hanmari{
  --lb-color-text:light-dark(
    var(--character-hanmari-mane-black),
    var(--character-hanmari-body));
  --lb-color-bg:light-dark(
    var(--character-hanmari-body),
    var(--character-hanmari-mane-black));
}
.link-button.color-leebyeori{
  --lb-color-text:light-dark(
    var(--character-leebyeori-mane-brown),
    var(--character-leebyeori-body));
  --lb-color-bg:light-dark(
    var(--character-leebyeori-body),
    var(--character-leebyeori-mane-brown));
}

.link-button.icon-naver-map::before{
  background-image:url("/siteicons/favicon_nmap.png");
  --lb-image-icon-size-multiplier:calc(1.4 * var(--lb-icon-size-multiplier));
  margin-top:calc(-0.1em * var(--lb-icon-offset-multiplier));
}

.link-button.color-kakao{
  --lb-color-text:light-dark(
    var(--color-kakao-darker),
    var(--color-kakao-base));
  --lb-color-bg:light-dark(
    var(--color-kakao-lighter),
    var(--color-background-dark));
}
.link-button.icon-kakao-map::before{
  background-image:url("/siteicons/favicon_kkm_32px.png");
  --lb-image-icon-size-multiplier:calc(1.2 * var(--lb-icon-size-multiplier));
  margin-top:calc(-0.1em * var(--lb-icon-offset-multiplier));
}

.link-button.color-google{
  --lb-color-text:var(--color-google-base);
  --lb-color-bg:light-dark(
    var(--color-google-lighter),
    var(--color-background-dark));
}
.link-button.icon-google-maps::before{
  background-image:url("/siteicons/favicon_gmaps.png");
  --lb-image-icon-size-multiplier:calc(1.2 * var(--lb-icon-size-multiplier));
  margin-top:calc(-0.1em * var(--lb-icon-offset-multiplier));
}

.link-button.color-google-docs{
  --lb-color-text:var(--color-google-docs);
  --lb-color-bg:light-dark(
    var(--color-background-light),
    var(--color-background-dark));
}
.link-button.icon-google-docs::before{
  background-image:url("/siteicons/Wikimedia_GoogleDocs_Logo.png");
  --lb-image-icon-size-multiplier:calc(1.2 * var(--lb-icon-size-multiplier));
  margin-top:calc(-0.1em * var(--lb-icon-offset-multiplier));
}
.link-button.icon-google-forms::before{
  background-image:url("/siteicons/Wikimedia_GoogleForms_Logo.png");
  --lb-image-icon-size-multiplier:calc(1.2 * var(--lb-icon-size-multiplier));
  margin-top:calc(-0.1em * var(--lb-icon-offset-multiplier));
}
.link-button.icon-google-slides::before{
  background-image:url("/siteicons/Wikimedia_GoogleSlides_Logo.png");
  --lb-image-icon-size-multiplier:calc(1.2 * var(--lb-icon-size-multiplier));
  margin-top:calc(-0.1em * var(--lb-icon-offset-multiplier));
}
.link-button.icon-google-sheets::before{
  background-image:url("/siteicons/Wikimedia_GoogleSheets_Logo.png");
  --lb-image-icon-size-multiplier:calc(1.2 * var(--lb-icon-size-multiplier));
  margin-top:calc(-0.1em * var(--lb-icon-offset-multiplier));
}

.link-button.color-google-forms{
  --lb-color-text:var(--color-google-forms);
  --lb-color-bg:light-dark(
    var(--color-background-light),
    var(--color-background-dark));
}
.link-button.color-google-slides{
  --lb-color-text:var(--color-google-slides);
  --lb-color-bg:light-dark(
    var(--color-background-light),
    var(--color-background-dark));
}
.link-button.color-google-sheets{
  --lb-color-text:var(--color-google-sheets);
  --lb-color-bg:light-dark(
    var(--color-background-light),
    var(--color-background-dark));
}

.light-mode .link-button.icon-witchform::before{
  background-image:url("/siteicons/WF_CropAlpha_Black.png");
  --lb-image-icon-size-multiplier:calc(1.5 * var(--lb-icon-size-multiplier));
  margin-top:calc(-0.2em * var(--lb-icon-offset-multiplier));
}
.dark-mode .link-button.icon-witchform::before{
  background-image:url("/siteicons/WF_CropAlpha_White.png");
  --lb-image-icon-size-multiplier:calc(1.5 * var(--lb-icon-size-multiplier));
  margin-top:calc(-0.2em * var(--lb-icon-offset-multiplier));
}

.link-button.color-witchform{
  --lb-color-bg:light-dark(
      var(--color-witchform-base),
      var(--color-background-dark)
  );
  --lb-color-text:light-dark(
      var(--color-witchform-fg),
      var(--color-witchform-bg)
  );
}