{"version":3,"sources":["banner.pcss"],"names":[],"mappings":"AAAA,iBAAiB;;AAEjB;EACE,kBAAkB;EAClB,aAAa;EACb,gCAAgC;EAChC,8BAA8B;EAC9B,yFAAyF;EACzF,2FAA2F;EAC3F,qDAAqD;EACrD,sBAAsB;EACtB,mDAAmD;EACnD,iEAAiE;EACjE,+BAA+B;;EAE/B,+BAA+B;AA8GjC;;AA7GE;;AAdF;IAeI;;yBAEqB;IACrB,kDAAkD;IAClD,2CAA2C;AAwG/C;;IAtGI;QACI,2DAA2D;IAC/D;EACF;;AAEA,aAAa;;AAEb;IACE,aAAa;IACb,wDAAwD;IACxD,iBAAiB;IACjB,iBAAiB;EASnB;;AAPE;MACE,+CAA+C;IACjD;;AAEA;MACE,kBAAkB;IACpB;;AAGF;IACE,wDAAwD;IACxD,kBAAkB;IAClB,kBAAkB;EAUpB;;AARE;MACE,gBAAgB;IAClB;;AAEA;MACE,gBAAgB;MAChB,kDAAkD;IACpD;;AAGF;IACE,kBAAkB;EAKpB;;AAHE;MACE,kBAAkB;IACpB;;AAGF,8DAA8D;;AAC9D;IACE,gBAAgB;IAChB,iEAAiE;EACnE;;AAEA;IACE,6BAA6B;EAC/B;;AAEA;IACE,8BAA8B;IAC9B,+FAA+F;IAC/F,0CAA0C;EAK5C;;AAHE;MACE,gCAAgC;IAClC;;AAGF;IACE,8BAA8B;IAC9B,yFAAyF;IACzF,uCAAuC;EAKzC;;AAHE;MACE,6BAA6B;IAC/B;;AAGF;IACE,8BAA8B;IAC9B,2FAA2F;IAC3F,wCAAwC;EAK1C;;AAHE;MACE,8BAA8B;IAChC;;AAGF,eAAe;;AAEf;IACE,0EAA0E;IAC1E,eAAe;IACf,cAAc;IACd,gBAAgB;EAClB;;AAEA;IACE;MACE,0EAA0E;MAC1E,eAAe;MACf,cAAc;MACd,gBAAgB;IAClB;EACF","file":"banner.css","sourcesContent":["/* Banner alert */\n\n.Banner {\n  position: relative;\n  display: grid;\n  padding: var(--base-size-8, 8px);\n  color: var(--color-fg-default);\n  background-image: linear-gradient(var(--color-accent-subtle), var(--color-accent-subtle));\n  border: var(--yattho-borderWidth-thin, max(1px, 0.0625rem)) solid var(--color-accent-muted);\n  border-radius: var(--yattho-borderRadius-medium, 6px);\n  grid-auto-flow: column;\n  grid-template-areas: 'visual message actions close';\n  grid-template-columns: min-content 1fr minmax(0,auto) min-content;\n  grid-template-rows: min-content;\n\n  /* `sm` breakpoint variantion */\n  @media (max-width: 543.98px) {\n    grid-template-areas:\n      'visual message close'\n      '. actions actions';\n    grid-template-columns: min-content 1fr min-content;\n    grid-template-rows: min-content min-content;\n\n    & .Banner-actions {\n        margin: var(--base-size-8, 8px) 0 0 var(--base-size-8, 8px);\n    }\n  }\n\n  /* Elements */\n\n  & .Banner-visual {\n    display: grid;\n    padding: var(--base-size-6, 6px) var(--base-size-8, 8px);\n    grid-area: visual;\n    align-self: start;\n\n    & > .octicon {\n      margin-block: calc(var(--base-size-4, 4px) / 2);\n    }\n\n    & > * {\n      align-self: center;\n    }\n  }\n\n  & .Banner-message {\n    padding: var(--base-size-6, 6px) var(--base-size-8, 8px);\n    grid-area: message;\n    align-self: center;\n\n    & p:last-child {\n      margin-bottom: 0;\n    }\n\n    & .Banner-title:not(:only-child) {\n      margin-bottom: 0;\n      font-weight: var(--base-text-weight-semibold, 600);\n    }\n  }\n\n  & .Banner-actions {\n    grid-area: actions;\n\n    &:last-child {\n      align-self: center;\n    }\n  }\n\n  /* is this used anywhere? could not find any use, but unsure */\n  & .Banner-close {\n    grid-area: close;\n    margin-left: var(--yattho-controlStack-medium-gap-condensed, 8px);\n  }\n\n  & .Banner-visual .octicon {\n    color: var(--color-accent-fg);\n  }\n\n  &.Banner--warning {\n    color: var(--color-fg-default);\n    background-image: linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle));\n    border-color: var(--color-attention-muted);\n\n    & .Banner-visual .octicon {\n      color: var(--color-attention-fg);\n    }\n  }\n\n  &.Banner--error {\n    color: var(--color-fg-default);\n    background-image: linear-gradient(var(--color-danger-subtle), var(--color-danger-subtle));\n    border-color: var(--color-danger-muted);\n\n    & .Banner-visual .octicon {\n      color: var(--color-danger-fg);\n    }\n  }\n\n  &.Banner--success {\n    color: var(--color-fg-default);\n    background-image: linear-gradient(var(--color-success-subtle), var(--color-success-subtle));\n    border-color: var(--color-success-muted);\n\n    & .Banner-visual .octicon {\n      color: var(--color-success-fg);\n    }\n  }\n\n  /* Full-width */\n\n  &.Banner--full {\n    margin-top: calc(var(--yattho-borderWidth-thin, max(1px, 0.0625rem)) * -1);\n    border-right: 0;\n    border-left: 0;\n    border-radius: 0;\n  }\n\n  @media (max-width: 767.98px) {\n    &.Banner--full-whenNarrow {\n      margin-top: calc(var(--yattho-borderWidth-thin, max(1px, 0.0625rem)) * -1);\n      border-right: 0;\n      border-left: 0;\n      border-radius: 0;\n    }\n  }\n}"]}