//TODO: This file is intended for dealing with fading a gradient for the background color to transparent, and the bug i Safari pre 15.6 doing this fade over a black transparent an not over the background color in transparent form - as other browsers do. And Safari do from 15.6 and higher.
//TODO: once opgrade to Dart Sass, this file should not be included via @import på via @use in the files that have requires such fading. At the time that is toolbar__filter, truncator and horizontal-scroll

:root {
  --transparent-background: transparent;
}

//this @media + @support only affects safari browsers: https://www.codegrepper.com/code-examples/css/Safari+only+CSS+hack
//detects Safari below version 15
@media not all and (min-resolution:.001dpcm) {
  @supports (-webkit-appearance:none) {

    $color: get-hexcode($color-default-brand, "background");
    $red: red($color);
    $green: green($color);
    $blue: blue($color);

    :root,
    :root .theme--normal {
      --transparent-background: rgba(#{$red}, #{$green}, #{$blue}, 0);
    }

    @each $theme-name, $color in $color-brands {
      $color: get-hexcode("dark-#{$theme-name}", "background");
      $red: red($color);
      $green: green($color);
      $blue: blue($color);

      $selector-theme-dark: 
      ".theme--dark .theme--#{$theme-name}," +
      ".theme--#{$theme-name}.theme--dark," +
      "*[class^=\"theme--\"] .theme--#{$theme-name}.theme--dark," +
      ".theme--normal .theme--#{$theme-name}.theme--dark," +
      ".theme--normal .theme--#{$theme-name} .theme--dark," +
      ".theme--dark .theme--#{$theme-name}.theme--dark," +
      ".theme--#{$theme-name} .theme--dark";
    
      @if $theme-name == $color-default-brand {
        :root .theme--dark,
        #{$selector-theme-dark} {
          --transparent-background: rgba(#{$red}, #{$green}, #{$blue}, 0);
        }
      }
      @else {
        #{$selector-theme-dark} {
          --transparent-background: rgba(#{$red}, #{$green}, #{$blue}, 0);
        }
      }
    }
  }
}