@use '../../variables' as *;

.sky-theme-modern {
  .sky-elevation-0-bordered {
    border: var(--sky-border-style-elevation) var(--sky-border-width-elevation)
      var(--sky-color-border-elevation);
  }

  .sky-elevation-1,
  .sky-elevation-1-bordered {
    box-shadow: var(--sky-elevation-raised-100);
  }

  .sky-elevation-1-bordered {
    border: var(--sky-border-style-elevation)
      var(--sky-border-width-container-base)
      var(--sky-color-border-container-base);
  }

  .sky-elevation-3 {
    box-shadow: var(--sky-elevation-overflow);
  }

  .sky-elevation-4 {
    box-shadow: var(--sky-elevation-overlay-100);
  }

  .sky-elevation-8 {
    box-shadow: var(--sky-elevation-overlay-200);
  }

  .sky-elevation-16 {
    box-shadow: var(--sky-elevation-overlay-300);
  }

  .sky-elevation-24 {
    box-shadow: var(--sky-elevation-overlay-400);
  }
}
