import { tokens as staticTokens } from "../utils/design";
import { buildThemedStyles } from "../AtlantisThemeContext";

export const shineWidth = staticTokens["space-largest"];

export const useStyles = buildThemedStyles(tokens => {
  return {
    container: {
      overflow: "hidden",
      position: "relative",
      width: "100%",
      height: tokens["space-base"],
      borderRadius: tokens["radius-base"],
    },

    background: {
      position: "absolute",
      top: 0,
      left: 0,
      width: "100%",
      height: "100%",
      backgroundColor: tokens["color-surface--reverse"],
      opacity: 0.075,
    },

    shine: {
      position: "absolute",
      top: 0,
      left: 0,
      width: shineWidth,
      height: "100%",
    },
  };
});