:root {
  --texture-metal: url("data:image/jpeg;base64,/9j/4QlQaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzE0MiA3OS4xNjA5MjQsIDIwMTcvMDcvMTMtMDE6MDY6MzkgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiLz4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8P3hwYWNrZXQgZW5kPSJ3Ij8+/+0ALFBob3Rvc2hvcCAzLjAAOEJJTQQlAAAAAAAQ1B2M2Y8AsgTpgAmY7PhCfv/bAIQAAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQICAgICAgICAgICAwMDAwMDAwMDAwEBAQEBAQECAQECAgIBAgIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMD/90ABAAI/+4ADkFkb2JlAGTAAAAAAf/AABEIAEAAQAMAEQABEQECEQH/xABhAAACAwEBAAAAAAAAAAAAAAADBAACCgEFAQEAAAAAAAAAAAAAAAAAAAAAEAADAQADAAICAwEAAwAAAAABAgMEERITBRQAIiEjMTIVMzQRAQAAAAAAAAAA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");
  --texture-radial-metal: url("data:image/jpeg;base64,/9j/4QlQaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzE0MiA3OS4xNjA5MjQsIDIwMTcvMDcvMTMtMDE6MDY6MzkgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiLz4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8P3hwYWNrZXQgZW5kPSJ3Ij8+/+0ALFBob3Rvc2hvcCAzLjAAOEJJTQQlAAAAAAAQ1B2M2Y8AsgTpgAmY7PhCfv/bAIQAAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQICAgICAgICAgICAwMDAwMDAwMDAwEBAQEBAQECAQECAgIBAgIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMD/90ABAAI/+4ADkFkb2JlAGTAAAAAAf/AABEIAEAAQAMAEQABEQECEQH/xABhAAACAwEBAAAAAAAAAAAAAAADBAACCgEFAQEAAAAAAAAAAAAAAAAAAAAAEAADAQADAAICAwEAAwAAAAABAgMEERITBRQAIiEjMTIVMzQRAQAAAAAAAAAA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");
  --gold: #ffcf21;
  --silver: #ffffff;
  --copper: #ff5100;
}

/*@mixin gradient-text($gradient, $bg : 'light') {
  @supports(mix-blend-mode: lighten) {
    display: inline-block;
    position: relative;

    &::before {
      content: '';
      display: block;
      position: absolute;
      top: 0; right: 0; bottom: 0; left: 0;

      background: unquote($gradient);
      pointer-events: none;
    }

    @if ($bg == 'light') {
      color: #000;
      background: #fff;
      mix-blend-mode: multiply;

      &::before {
        mix-blend-mode: screen;
      }
    } @else {
      color: #fff;
      background: #000;
      mix-blend-mode: lighten;

      &::before {
        mix-blend-mode: multiply;
      }
    }
  }
}
*/
.bg-metal.bg-primary {
  color: white;
  background-repeat: repeat;
  background-repeat: repeat;
  background-blend-mode: luminosity,multiply;
  background-size: 200% 100%, auto, auto;
  background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 6%, rgba(255, 255, 255, 0.2) 15%, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.1) 45%), var(--texture-metal), linear-gradient(var(--primary), var(--primary));
}

.bg-metal.btn-primary {
  color: white;
  background-repeat: repeat;
  background-repeat: repeat;
  background-blend-mode: luminosity,multiply;
  background-size: 200% 100%, auto, auto;
  background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 6%, rgba(255, 255, 255, 0.2) 15%, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.1) 45%), var(--texture-metal), linear-gradient(var(--primary), var(--primary));
}

/*.text-metal.text-primary {
      background-clip: text;
      color: rgba(0, 0, 0, 0);
      @include texture-background($texture-name, $color-name, false);
      // TODO shinyness (see backup)
    }*/
@supports (mix-blend-mode: lighten) {
  .text-metal.text-primary {
    display: inline-block;
    position: relative;
    /*
        color: #000;
        background: #fff;
        mix-blend-mode: multiply;

        &::before {
          mix-blend-mode: screen;
        }*/
    color: #fff;
    background: #000;
    mix-blend-mode: lighten;
  }
  .text-metal.text-primary::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-repeat: repeat;
    background-blend-mode: luminosity,multiply;
    background-size: 200% 100%, auto, auto;
    background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 6%, rgba(255, 255, 255, 0.2) 15%, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.1) 45%), var(--texture-metal), linear-gradient(var(--primary), var(--primary));
    pointer-events: none;
  }
  .text-metal.text-primary::before {
    mix-blend-mode: multiply;
  }
}

.bg-metal.bg-secondary {
  color: white;
  background-repeat: repeat;
  background-repeat: repeat;
  background-blend-mode: luminosity,multiply;
  background-size: 200% 100%, auto, auto;
  background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 6%, rgba(255, 255, 255, 0.2) 15%, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.1) 45%), var(--texture-metal), linear-gradient(var(--secondary), var(--secondary));
}

.bg-metal.btn-secondary {
  color: white;
  background-repeat: repeat;
  background-repeat: repeat;
  background-blend-mode: luminosity,multiply;
  background-size: 200% 100%, auto, auto;
  background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 6%, rgba(255, 255, 255, 0.2) 15%, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.1) 45%), var(--texture-metal), linear-gradient(var(--secondary), var(--secondary));
}

/*.text-metal.text-secondary {
      background-clip: text;
      color: rgba(0, 0, 0, 0);
      @include texture-background($texture-name, $color-name, false);
      // TODO shinyness (see backup)
    }*/
@supports (mix-blend-mode: lighten) {
  .text-metal.text-secondary {
    display: inline-block;
    position: relative;
    /*
        color: #000;
        background: #fff;
        mix-blend-mode: multiply;

        &::before {
          mix-blend-mode: screen;
        }*/
    color: #fff;
    background: #000;
    mix-blend-mode: lighten;
  }
  .text-metal.text-secondary::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-repeat: repeat;
    background-blend-mode: luminosity,multiply;
    background-size: 200% 100%, auto, auto;
    background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 6%, rgba(255, 255, 255, 0.2) 15%, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.1) 45%), var(--texture-metal), linear-gradient(var(--secondary), var(--secondary));
    pointer-events: none;
  }
  .text-metal.text-secondary::before {
    mix-blend-mode: multiply;
  }
}

.bg-metal.bg-success {
  color: white;
  background-repeat: repeat;
  background-repeat: repeat;
  background-blend-mode: luminosity,multiply;
  background-size: 200% 100%, auto, auto;
  background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 6%, rgba(255, 255, 255, 0.2) 15%, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.1) 45%), var(--texture-metal), linear-gradient(var(--success), var(--success));
}

.bg-metal.btn-success {
  color: white;
  background-repeat: repeat;
  background-repeat: repeat;
  background-blend-mode: luminosity,multiply;
  background-size: 200% 100%, auto, auto;
  background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 6%, rgba(255, 255, 255, 0.2) 15%, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.1) 45%), var(--texture-metal), linear-gradient(var(--success), var(--success));
}

/*.text-metal.text-success {
      background-clip: text;
      color: rgba(0, 0, 0, 0);
      @include texture-background($texture-name, $color-name, false);
      // TODO shinyness (see backup)
    }*/
@supports (mix-blend-mode: lighten) {
  .text-metal.text-success {
    display: inline-block;
    position: relative;
    /*
        color: #000;
        background: #fff;
        mix-blend-mode: multiply;

        &::before {
          mix-blend-mode: screen;
        }*/
    color: #fff;
    background: #000;
    mix-blend-mode: lighten;
  }
  .text-metal.text-success::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-repeat: repeat;
    background-blend-mode: luminosity,multiply;
    background-size: 200% 100%, auto, auto;
    background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 6%, rgba(255, 255, 255, 0.2) 15%, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.1) 45%), var(--texture-metal), linear-gradient(var(--success), var(--success));
    pointer-events: none;
  }
  .text-metal.text-success::before {
    mix-blend-mode: multiply;
  }
}

.bg-metal.bg-info {
  color: white;
  background-repeat: repeat;
  background-repeat: repeat;
  background-blend-mode: luminosity,multiply;
  background-size: 200% 100%, auto, auto;
  background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 6%, rgba(255, 255, 255, 0.2) 15%, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.1) 45%), var(--texture-metal), linear-gradient(var(--info), var(--info));
}

.bg-metal.btn-info {
  color: white;
  background-repeat: repeat;
  background-repeat: repeat;
  background-blend-mode: luminosity,multiply;
  background-size: 200% 100%, auto, auto;
  background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 6%, rgba(255, 255, 255, 0.2) 15%, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.1) 45%), var(--texture-metal), linear-gradient(var(--info), var(--info));
}

/*.text-metal.text-info {
      background-clip: text;
      color: rgba(0, 0, 0, 0);
      @include texture-background($texture-name, $color-name, false);
      // TODO shinyness (see backup)
    }*/
@supports (mix-blend-mode: lighten) {
  .text-metal.text-info {
    display: inline-block;
    position: relative;
    /*
        color: #000;
        background: #fff;
        mix-blend-mode: multiply;

        &::before {
          mix-blend-mode: screen;
        }*/
    color: #fff;
    background: #000;
    mix-blend-mode: lighten;
  }
  .text-metal.text-info::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-repeat: repeat;
    background-blend-mode: luminosity,multiply;
    background-size: 200% 100%, auto, auto;
    background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 6%, rgba(255, 255, 255, 0.2) 15%, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.1) 45%), var(--texture-metal), linear-gradient(var(--info), var(--info));
    pointer-events: none;
  }
  .text-metal.text-info::before {
    mix-blend-mode: multiply;
  }
}

.bg-metal.bg-warning {
  color: white;
  background-repeat: repeat;
  background-repeat: repeat;
  background-blend-mode: luminosity,multiply;
  background-size: 200% 100%, auto, auto;
  background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 6%, rgba(255, 255, 255, 0.2) 15%, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.1) 45%), var(--texture-metal), linear-gradient(var(--warning), var(--warning));
}

.bg-metal.btn-warning {
  color: white;
  background-repeat: repeat;
  background-repeat: repeat;
  background-blend-mode: luminosity,multiply;
  background-size: 200% 100%, auto, auto;
  background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 6%, rgba(255, 255, 255, 0.2) 15%, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.1) 45%), var(--texture-metal), linear-gradient(var(--warning), var(--warning));
}

/*.text-metal.text-warning {
      background-clip: text;
      color: rgba(0, 0, 0, 0);
      @include texture-background($texture-name, $color-name, false);
      // TODO shinyness (see backup)
    }*/
@supports (mix-blend-mode: lighten) {
  .text-metal.text-warning {
    display: inline-block;
    position: relative;
    /*
        color: #000;
        background: #fff;
        mix-blend-mode: multiply;

        &::before {
          mix-blend-mode: screen;
        }*/
    color: #fff;
    background: #000;
    mix-blend-mode: lighten;
  }
  .text-metal.text-warning::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-repeat: repeat;
    background-blend-mode: luminosity,multiply;
    background-size: 200% 100%, auto, auto;
    background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 6%, rgba(255, 255, 255, 0.2) 15%, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.1) 45%), var(--texture-metal), linear-gradient(var(--warning), var(--warning));
    pointer-events: none;
  }
  .text-metal.text-warning::before {
    mix-blend-mode: multiply;
  }
}

.bg-metal.bg-danger {
  color: white;
  background-repeat: repeat;
  background-repeat: repeat;
  background-blend-mode: luminosity,multiply;
  background-size: 200% 100%, auto, auto;
  background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 6%, rgba(255, 255, 255, 0.2) 15%, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.1) 45%), var(--texture-metal), linear-gradient(var(--danger), var(--danger));
}

.bg-metal.btn-danger {
  color: white;
  background-repeat: repeat;
  background-repeat: repeat;
  background-blend-mode: luminosity,multiply;
  background-size: 200% 100%, auto, auto;
  background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 6%, rgba(255, 255, 255, 0.2) 15%, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.1) 45%), var(--texture-metal), linear-gradient(var(--danger), var(--danger));
}

/*.text-metal.text-danger {
      background-clip: text;
      color: rgba(0, 0, 0, 0);
      @include texture-background($texture-name, $color-name, false);
      // TODO shinyness (see backup)
    }*/
@supports (mix-blend-mode: lighten) {
  .text-metal.text-danger {
    display: inline-block;
    position: relative;
    /*
        color: #000;
        background: #fff;
        mix-blend-mode: multiply;

        &::before {
          mix-blend-mode: screen;
        }*/
    color: #fff;
    background: #000;
    mix-blend-mode: lighten;
  }
  .text-metal.text-danger::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-repeat: repeat;
    background-blend-mode: luminosity,multiply;
    background-size: 200% 100%, auto, auto;
    background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 6%, rgba(255, 255, 255, 0.2) 15%, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.1) 45%), var(--texture-metal), linear-gradient(var(--danger), var(--danger));
    pointer-events: none;
  }
  .text-metal.text-danger::before {
    mix-blend-mode: multiply;
  }
}

.bg-metal.bg-light {
  color: white;
  background-repeat: repeat;
  background-repeat: repeat;
  background-blend-mode: luminosity,multiply;
  background-size: 200% 100%, auto, auto;
  background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 6%, rgba(255, 255, 255, 0.2) 15%, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.1) 45%), var(--texture-metal), linear-gradient(var(--light), var(--light));
}

.bg-metal.btn-light {
  color: white;
  background-repeat: repeat;
  background-repeat: repeat;
  background-blend-mode: luminosity,multiply;
  background-size: 200% 100%, auto, auto;
  background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 6%, rgba(255, 255, 255, 0.2) 15%, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.1) 45%), var(--texture-metal), linear-gradient(var(--light), var(--light));
}

/*.text-metal.text-light {
      background-clip: text;
      color: rgba(0, 0, 0, 0);
      @include texture-background($texture-name, $color-name, false);
      // TODO shinyness (see backup)
    }*/
@supports (mix-blend-mode: lighten) {
  .text-metal.text-light {
    display: inline-block;
    position: relative;
    /*
        color: #000;
        background: #fff;
        mix-blend-mode: multiply;

        &::before {
          mix-blend-mode: screen;
        }*/
    color: #fff;
    background: #000;
    mix-blend-mode: lighten;
  }
  .text-metal.text-light::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-repeat: repeat;
    background-blend-mode: luminosity,multiply;
    background-size: 200% 100%, auto, auto;
    background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 6%, rgba(255, 255, 255, 0.2) 15%, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.1) 45%), var(--texture-metal), linear-gradient(var(--light), var(--light));
    pointer-events: none;
  }
  .text-metal.text-light::before {
    mix-blend-mode: multiply;
  }
}

.bg-metal.bg-dark {
  color: white;
  background-repeat: repeat;
  background-repeat: repeat;
  background-blend-mode: luminosity,multiply;
  background-size: 200% 100%, auto, auto;
  background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 6%, rgba(255, 255, 255, 0.2) 15%, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.1) 45%), var(--texture-metal), linear-gradient(var(--dark), var(--dark));
}

.bg-metal.btn-dark {
  color: white;
  background-repeat: repeat;
  background-repeat: repeat;
  background-blend-mode: luminosity,multiply;
  background-size: 200% 100%, auto, auto;
  background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 6%, rgba(255, 255, 255, 0.2) 15%, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.1) 45%), var(--texture-metal), linear-gradient(var(--dark), var(--dark));
}

/*.text-metal.text-dark {
      background-clip: text;
      color: rgba(0, 0, 0, 0);
      @include texture-background($texture-name, $color-name, false);
      // TODO shinyness (see backup)
    }*/
@supports (mix-blend-mode: lighten) {
  .text-metal.text-dark {
    display: inline-block;
    position: relative;
    /*
        color: #000;
        background: #fff;
        mix-blend-mode: multiply;

        &::before {
          mix-blend-mode: screen;
        }*/
    color: #fff;
    background: #000;
    mix-blend-mode: lighten;
  }
  .text-metal.text-dark::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-repeat: repeat;
    background-blend-mode: luminosity,multiply;
    background-size: 200% 100%, auto, auto;
    background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 6%, rgba(255, 255, 255, 0.2) 15%, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.1) 45%), var(--texture-metal), linear-gradient(var(--dark), var(--dark));
    pointer-events: none;
  }
  .text-metal.text-dark::before {
    mix-blend-mode: multiply;
  }
}

.bg-metal.bg-gold {
  color: white;
  background-repeat: repeat;
  background-repeat: repeat;
  background-blend-mode: luminosity,multiply;
  background-size: 200% 100%, auto, auto;
  background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 6%, rgba(255, 255, 255, 0.2) 15%, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.1) 45%), var(--texture-metal), linear-gradient(var(--gold), var(--gold));
}

.bg-metal.btn-gold {
  color: white;
  background-repeat: repeat;
  background-repeat: repeat;
  background-blend-mode: luminosity,multiply;
  background-size: 200% 100%, auto, auto;
  background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 6%, rgba(255, 255, 255, 0.2) 15%, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.1) 45%), var(--texture-metal), linear-gradient(var(--gold), var(--gold));
}

/*.text-metal.text-gold {
      background-clip: text;
      color: rgba(0, 0, 0, 0);
      @include texture-background($texture-name, $color-name, false);
      // TODO shinyness (see backup)
    }*/
@supports (mix-blend-mode: lighten) {
  .text-metal.text-gold {
    display: inline-block;
    position: relative;
    /*
        color: #000;
        background: #fff;
        mix-blend-mode: multiply;

        &::before {
          mix-blend-mode: screen;
        }*/
    color: #fff;
    background: #000;
    mix-blend-mode: lighten;
  }
  .text-metal.text-gold::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-repeat: repeat;
    background-blend-mode: luminosity,multiply;
    background-size: 200% 100%, auto, auto;
    background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 6%, rgba(255, 255, 255, 0.2) 15%, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.1) 45%), var(--texture-metal), linear-gradient(var(--gold), var(--gold));
    pointer-events: none;
  }
  .text-metal.text-gold::before {
    mix-blend-mode: multiply;
  }
}

.bg-metal.bg-silver {
  color: white;
  background-repeat: repeat;
  background-repeat: repeat;
  background-blend-mode: luminosity,multiply;
  background-size: 200% 100%, auto, auto;
  background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 6%, rgba(255, 255, 255, 0.2) 15%, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.1) 45%), var(--texture-metal), linear-gradient(var(--silver), var(--silver));
}

.bg-metal.btn-silver {
  color: white;
  background-repeat: repeat;
  background-repeat: repeat;
  background-blend-mode: luminosity,multiply;
  background-size: 200% 100%, auto, auto;
  background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 6%, rgba(255, 255, 255, 0.2) 15%, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.1) 45%), var(--texture-metal), linear-gradient(var(--silver), var(--silver));
}

/*.text-metal.text-silver {
      background-clip: text;
      color: rgba(0, 0, 0, 0);
      @include texture-background($texture-name, $color-name, false);
      // TODO shinyness (see backup)
    }*/
@supports (mix-blend-mode: lighten) {
  .text-metal.text-silver {
    display: inline-block;
    position: relative;
    /*
        color: #000;
        background: #fff;
        mix-blend-mode: multiply;

        &::before {
          mix-blend-mode: screen;
        }*/
    color: #fff;
    background: #000;
    mix-blend-mode: lighten;
  }
  .text-metal.text-silver::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-repeat: repeat;
    background-blend-mode: luminosity,multiply;
    background-size: 200% 100%, auto, auto;
    background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 6%, rgba(255, 255, 255, 0.2) 15%, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.1) 45%), var(--texture-metal), linear-gradient(var(--silver), var(--silver));
    pointer-events: none;
  }
  .text-metal.text-silver::before {
    mix-blend-mode: multiply;
  }
}

.bg-metal.bg-copper {
  color: white;
  background-repeat: repeat;
  background-repeat: repeat;
  background-blend-mode: luminosity,multiply;
  background-size: 200% 100%, auto, auto;
  background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 6%, rgba(255, 255, 255, 0.2) 15%, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.1) 45%), var(--texture-metal), linear-gradient(var(--copper), var(--copper));
}

.bg-metal.btn-copper {
  color: white;
  background-repeat: repeat;
  background-repeat: repeat;
  background-blend-mode: luminosity,multiply;
  background-size: 200% 100%, auto, auto;
  background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 6%, rgba(255, 255, 255, 0.2) 15%, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.1) 45%), var(--texture-metal), linear-gradient(var(--copper), var(--copper));
}

/*.text-metal.text-copper {
      background-clip: text;
      color: rgba(0, 0, 0, 0);
      @include texture-background($texture-name, $color-name, false);
      // TODO shinyness (see backup)
    }*/
@supports (mix-blend-mode: lighten) {
  .text-metal.text-copper {
    display: inline-block;
    position: relative;
    /*
        color: #000;
        background: #fff;
        mix-blend-mode: multiply;

        &::before {
          mix-blend-mode: screen;
        }*/
    color: #fff;
    background: #000;
    mix-blend-mode: lighten;
  }
  .text-metal.text-copper::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-repeat: repeat;
    background-blend-mode: luminosity,multiply;
    background-size: 200% 100%, auto, auto;
    background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 6%, rgba(255, 255, 255, 0.2) 15%, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.1) 45%), var(--texture-metal), linear-gradient(var(--copper), var(--copper));
    pointer-events: none;
  }
  .text-metal.text-copper::before {
    mix-blend-mode: multiply;
  }
}

.metallic-anim {
  animation: metallic-animation 2s linear infinite;
}

.metallic-anim-2 {
  animation: metallic-animation-2 2s linear infinite;
}

@keyframes metallic-animation {
  from {
    background-position: 0 0, 0 0, 0 0;
  }
  to {
    background-position: -200% 0, 0 0, 0 0;
  }
}

@keyframes metallic-animation-2 {
  from {
    background-position: 0 0, 0 0, 0 0;
  }
  to {
    background-position: 200% 0, 0 0, 0 0;
  }
}

@keyframes metallic-animation-texture-1 {
  from {
    background-position: 0 0, 0 0, 0 0;
  }
  to {
    background-position: 0 0, 64px 0, 0 0;
  }
}

/*# sourceMappingURL=textures.css.map */