@mixin background-gradient($var, $angle) {
  #{$var}: linear-gradient(
    $angle,
    var(--advanced-camera-card-menu-background),
    var(--advanced-camera-card-menu-background),
    var(--advanced-camera-card-menu-background),
    color-mix(in oklab, var(--advanced-camera-card-menu-background), transparent 100%)
  );
}

:host([themes~='traditional']) {
  /*********
   * General
   *********/

  --advanced-camera-card-control-background: black;

  /******
   * Menu
   ******/

  --advanced-camera-card-menu-button-active-color: var(--primary-color, white);
  --advanced-camera-card-menu-button-background: rgba(0, 0, 0, 0.6);

  @include background-gradient(
    '--advanced-camera-card-menu-position-left-alignment-top-background',
    180deg
  );
  @include background-gradient(
    '--advanced-camera-card-menu-position-left-alignment-bottom-background',
    0deg
  );
  @include background-gradient(
    '--advanced-camera-card-menu-position-right-alignment-top-background',
    180deg
  );
  @include background-gradient(
    '--advanced-camera-card-menu-position-right-alignment-bottom-background',
    0deg
  );

  @include background-gradient(
    '--advanced-camera-card-menu-position-top-alignment-left-background',
    90deg
  );
  @include background-gradient(
    '--advanced-camera-card-menu-position-top-alignment-right-background',
    270deg
  );
  @include background-gradient(
    '--advanced-camera-card-menu-position-bottom-alignment-left-background',
    90deg
  );
  @include background-gradient(
    '--advanced-camera-card-menu-position-bottom-alignment-right-background',
    270deg
  );

  --advanced-camera-card-menu-position-top-alignment-left-style-outside-background: var(
    --secondary-background-color
  );
  --advanced-camera-card-menu-position-top-alignment-right-style-outside-background: var(
    --secondary-background-color
  );
  --advanced-camera-card-menu-position-bottom-alignment-left-style-outside-background: var(
    --secondary-background-color
  );
  --advanced-camera-card-menu-position-bottom-alignment-right-style-outside-background: var(
    --secondary-background-color
  );

  /************
   * Status bar
   ************/

  --advanced-camera-card-status-bar-color: white;

  @include background-gradient(
    '--advanced-camera-card-status-bar-position-top-background',
    90deg
  );
  @include background-gradient(
    '--advanced-camera-card-status-bar-position-bottom-background',
    90deg
  );

  --advanced-camera-card-status-bar-position-top-style-outside-background: var(
    --secondary-background-color
  );
  --advanced-camera-card-status-bar-position-bottom-style-outside-background: var(
    --secondary-background-color
  );
  --advanced-camera-card-status-bar-position-top-style-outside-color: var(
    --secondary-text-color
  );
  --advanced-camera-card-status-bar-position-bottom-style-outside-color: var(
    --secondary-text-color
  );
}
