import { style } from "@vanilla-extract/css";
import { Hover, MinWidth } from "../media.ts";
import iconMask from "./iconMask.svg";

export const accountIcon = {
  container: style({
    position: "relative",
    marginInline: "auto",

    inlineSize: "56px",
    blockSize: "56px",
  }),

  syncIcon: style({
    position: "absolute",
    right: "0",
    bottom: "0",
  }),

  image: style({
    mask: `url("${iconMask}") no-repeat`,
    inlineSize: "100%",
    blockSize: "100%",
    borderRadius: "50%",
  }),
};

export const page = style({
  backgroundColor: "white",

  "@media": {
    [MinWidth.SMALL]: {
      backgroundColor: "transparent",
      padding: "clamp(1rem, 5vw, 5rem)",
    },
  },
});

export const accountPicker = {
  container: style({
    backgroundColor: "#fafafa",
    borderRadius: "0.5rem",
  }),

  button: style({
    padding: "1rem 1.5rem",
    textAlign: "start",
    inlineSize: "100%",
    borderRadius: "inherit",

    "@media": {
      [Hover.HOVER]: {
        transition: "200ms background-color",

        ":hover": {
          backgroundColor: "hsl(from #fafafa h s calc(l - 3))",
        },
      },
    },
  }),

  buttonLabel: style({
    fontWeight: 600,
    fontSize: "1.125rem",
  }),

  divider: style({
    marginInline: "1.5rem",
    backgroundColor: "#e2e2e2",
    blockSize: "1px",
  }),
};

export const loadingView = {
  container: style({
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    height: "12rem",
  }),
};