{"version":3,"sources":["file:///Users/jakubfreisler/Projects/vuestorefront/sfui2/packages/sfui/frameworks/sass/components/VsfButton.scss","../../sass/components/VsfButton.scss"],"names":[],"mappings":"AAAA,YAEE,6BAAA,CACA,8BAAA,CACA,wDAAA,CACA,yDAAA,CAGA,kBAAA,CAAA,mBAAA,CAAA,cAAA,CAAA,eAAA,CAAA,sBAAA,CAAA,kBAAA,CAAA,qBAAA,CA6GA,2CAAA,CACA,6CC9GF,CDGI,wDAAA,qBAAA,CAIA,mBAAA,YAAA,CAAA,WAAA,CAIA,qBAAA,oBAAA,CAKA,sDAAA,iBAAA,CAAA,mBAAA,CAAA,qBAAA,CAAA,6BAAA,CAAA,0GAAA,CAAA,kGAAA,CAAA,sDAAA,CAAA,kGAAA,CAAA,wFAAA,CAAA,6CAAA,CAAA,UAAA,CAAA,mBAAA,CAGE,gGAAA,wBAAA,CAIJ,gBACE,iCAAA,CAEA,iBAAA,CAAA,WAAA,CAAA,mBCPJ,CDUI,+BAEE,cAAA,CADA,aCPN,CDaI,kBAAA,aAAA,CAGF,gBACE,gCAAA,CAEA,WCZJ,CDiBM,uEAAA,iBAAA,CAAA,mBAAA,CAAA,uDAAA,CAAA,yFAAA,CAAA,oDAAA,CAAA,kGAAA,CAAA,6CAAA,CAAA,wCAAA,6EAAA,iBAAA,CAAA,iEAAA,CAAA,mGAAA,CAAA,oDAAA,CAAA,kGAAA,CAAA,CAAA,8EAAA,iBAAA,CAAA,mDAAA,CAIA,2CAAA,iBAAA,CAAA,mBAAA,CAAA,sDAAA,CAAA,6CAAA,CAAA,wCAAA,iDAAA,iBAAA,CAAA,mDAAA,CAAA,CAAA,kDAAA,iBAAA,CAAA,mDAAA,CAOA,mGAAA,mBAAA,CAAA,2CAAA,CAAA,wCAAA,+GAAA,iBAAA,CAAA,sDAAA,CAAA,CAAA,iHAAA,iBAAA,CAAA,mBAAA,CAAA,sDAAA,CAAA,0CAAA,CAIA,yFAAA,mBAAA,CAAA,6CAAA,CAAA,wCAAA,qGAAA,iBAAA,CAAA,mBAAA,CAAA,sDAAA,CAAA,0CAAA,CAAA,CAAA,uGAAA,iBAAA,CAAA,mBAAA,CAAA,sDAAA,CAAA,0CAAA,CAMA,kDAAA,0DAAA,CAAA,4FAAA,CAAA,0GAAA,CAAA,wGAAA,CAAA,mBAAA,CAAA,uDAAA,CAAA,kGAAA,CAAA,wFAAA,CAAA,wCAAA,wDAAA,iEAAA,CAAA,mGAAA,CAAA,mBAAA,CAAA,uDAAA,CAAA,kGAAA,CAAA,CAAA,yDAAA,0DAAA,CAAA,4FAAA,CAAA,mBAAA,CAAA,uDAAA,CAAA,kGAAA,CAIA,wCAAA,mDAAA,mBAAA,CAAA,uDAAA,CAAA,CAAA,oDAAA,mBAAA,CAAA,uDAAA,CAIJ,oBACE,oDC1BJ,CD6BE,oBACE,mDC3BJ,CD8BE,wBACE,+FC5BJ,CD+BE,wBACE,gGC7BJ,CDgCE,wBACE,2BAAA,CACA,4BC9BJ,CDgCI,+CACE,gEC9BN,CDiCI,+CACE,iEC/BN,CDiCM,0FACE,eC/BR","file":"VsfButton.css","sourcesContent":[".vsf-button {\n  // TODO: use token css-variable for e.g 1rem\n  --vsf-button-icon-padding: 2px;\n  --vsf-button-size-padding: 1rem;\n  --vsf-button-padding-left: var(--vsf-button-size-padding);\n  --vsf-button-padding-right: var(--vsf-button-size-padding);\n\n  $self: &;\n  @apply inline-flex items-center justify-center outline-violet font-medium text-base;\n\n  &:not(#{$self}--tile, #{$self}--rounded) {\n    @apply rounded-md;\n  }\n\n  &--block {\n    @apply flex flex-1;\n  }\n\n  &--rounded {\n    @apply rounded-full;\n  }\n\n  &#{$self}--disabled,\n  &:disabled {\n    @apply text-gray-500 opacity-50 bg-gray-200 shadow-none pointer-events-none ring-0;\n\n    &#{$self}--tertiary {\n      @apply bg-transparent;\n    }\n  }\n\n  &--sm {\n    --vsf-button-size-padding: 0.75rem;\n\n    @apply leading-5 text-sm h-8;\n\n    // TODO: use css-variable to change width and height\n    .vsf-icon-base {\n      width: 1.25rem;\n      height: 1.25rem;\n    }\n  }\n\n  &--base {\n    @apply h-10;\n  }\n\n  &--lg {\n    --vsf-button-size-padding: 1.5rem;\n\n    @apply h-12;\n  }\n\n  &--primary {\n    &:not(#{$self}--disabled, #{$self}--greyscale ) {\n      @apply text-white hover:shadow-medium shadow-base bg-primary-700 hover:bg-primary-800 active:bg-primary-900;\n    }\n\n    &#{$self}--greyscale {\n      @apply text-white bg-gray-500 hover:bg-gray-600 active:bg-gray-700;\n    }\n  }\n\n  &--secondary,\n  &--tertiary {\n    &:not(#{$self}--disabled) {\n      @apply text-primary-800 hover:bg-primary-100 active:bg-primary-200 active:text-primary-900;\n    }\n\n    &#{$self}--greyscale {\n      @apply text-gray-500 hover:bg-gray-100 hover:text-gray-600 active:bg-gray-200 active:text-gray-700;\n    }\n  }\n\n  &--secondary {\n    &:not(#{$self}--disabled) {\n      @apply ring-1 ring-gray-200 hover:shadow-medium active:shadow shadow hover:ring-primary-200 active:ring-primary-300;\n    }\n\n    &#{$self}--greyscale {\n      @apply hover:ring-gray-300 active:ring-gray-300;\n    }\n  }\n\n  &__prefix {\n    padding-right: calc(var(--vsf-button-size-padding) / 2);\n  }\n\n  &__suffix {\n    padding-left: calc(var(--vsf-button-size-padding) / 2);\n  }\n\n  &--has-prefix {\n    --vsf-button-padding-left: calc(var(--vsf-button-size-padding) - var(--vsf-button-icon-padding));\n  }\n\n  &--has-suffix {\n    --vsf-button-padding-right: calc(var(--vsf-button-size-padding) - var(--vsf-button-icon-padding));\n  }\n\n  &--no-content {\n    --vsf-button-padding-left: 0;\n    --vsf-button-padding-right: 0;\n\n    &#{$self}--has-prefix {\n      --vsf-button-padding-left: calc(var(--vsf-button-size-padding) / 2);\n    }\n\n    &#{$self}--has-suffix {\n      --vsf-button-padding-right: calc(var(--vsf-button-size-padding) / 2);\n\n      &#{$self}--has-prefix #{$self}__prefix {\n        padding-right: 0;\n      }\n    }\n  }\n\n  padding-left: var(--vsf-button-padding-left);\n  padding-right: var(--vsf-button-padding-right);\n}\n",".vsf-button {\n  --vsf-button-icon-padding: 2px;\n  --vsf-button-size-padding: 1rem;\n  --vsf-button-padding-left: var(--vsf-button-size-padding);\n  --vsf-button-padding-right: var(--vsf-button-size-padding);\n  @apply inline-flex items-center justify-center outline-violet font-medium text-base;\n  padding-left: var(--vsf-button-padding-left);\n  padding-right: var(--vsf-button-padding-right);\n}\n.vsf-button:not(.vsf-button--tile, .vsf-button--rounded) {\n  @apply rounded-md;\n}\n.vsf-button--block {\n  @apply flex flex-1;\n}\n.vsf-button--rounded {\n  @apply rounded-full;\n}\n.vsf-button.vsf-button--disabled, .vsf-button:disabled {\n  @apply text-gray-500 opacity-50 bg-gray-200 shadow-none pointer-events-none ring-0;\n}\n.vsf-button.vsf-button--disabled.vsf-button--tertiary, .vsf-button:disabled.vsf-button--tertiary {\n  @apply bg-transparent;\n}\n.vsf-button--sm {\n  --vsf-button-size-padding: 0.75rem;\n  @apply leading-5 text-sm h-8;\n}\n.vsf-button--sm .vsf-icon-base {\n  width: 1.25rem;\n  height: 1.25rem;\n}\n.vsf-button--base {\n  @apply h-10;\n}\n.vsf-button--lg {\n  --vsf-button-size-padding: 1.5rem;\n  @apply h-12;\n}\n.vsf-button--primary:not(.vsf-button--disabled, .vsf-button--greyscale) {\n  @apply text-white hover:shadow-medium shadow-base bg-primary-700 hover:bg-primary-800 active:bg-primary-900;\n}\n.vsf-button--primary.vsf-button--greyscale {\n  @apply text-white bg-gray-500 hover:bg-gray-600 active:bg-gray-700;\n}\n.vsf-button--secondary:not(.vsf-button--disabled), .vsf-button--tertiary:not(.vsf-button--disabled) {\n  @apply text-primary-800 hover:bg-primary-100 active:bg-primary-200 active:text-primary-900;\n}\n.vsf-button--secondary.vsf-button--greyscale, .vsf-button--tertiary.vsf-button--greyscale {\n  @apply text-gray-500 hover:bg-gray-100 hover:text-gray-600 active:bg-gray-200 active:text-gray-700;\n}\n.vsf-button--secondary:not(.vsf-button--disabled) {\n  @apply ring-1 ring-gray-200 hover:shadow-medium active:shadow shadow hover:ring-primary-200 active:ring-primary-300;\n}\n.vsf-button--secondary.vsf-button--greyscale {\n  @apply hover:ring-gray-300 active:ring-gray-300;\n}\n.vsf-button__prefix {\n  padding-right: calc(var(--vsf-button-size-padding) / 2);\n}\n.vsf-button__suffix {\n  padding-left: calc(var(--vsf-button-size-padding) / 2);\n}\n.vsf-button--has-prefix {\n  --vsf-button-padding-left: calc(var(--vsf-button-size-padding) - var(--vsf-button-icon-padding));\n}\n.vsf-button--has-suffix {\n  --vsf-button-padding-right: calc(var(--vsf-button-size-padding) - var(--vsf-button-icon-padding));\n}\n.vsf-button--no-content {\n  --vsf-button-padding-left: 0;\n  --vsf-button-padding-right: 0;\n}\n.vsf-button--no-content.vsf-button--has-prefix {\n  --vsf-button-padding-left: calc(var(--vsf-button-size-padding) / 2);\n}\n.vsf-button--no-content.vsf-button--has-suffix {\n  --vsf-button-padding-right: calc(var(--vsf-button-size-padding) / 2);\n}\n.vsf-button--no-content.vsf-button--has-suffix.vsf-button--has-prefix .vsf-button__prefix {\n  padding-right: 0;\n}"]}