@use "variables"

@use "sass:color"
.fill
  bottom: 0
  left: 0
  position: absolute
  right: 0
  top: 0

img
  &.square
    background-repeat: no-repeat
    background-size: cover
    display: block
    width: 100%

@mixin card-style
  background: variables.$card-background
  border: solid 2px #b68000
  transition: background variables.$duration-entering-screen variables.$easing-ease-out

  &.is-selected
    background: color.scale(variables.$card-background, $lightness: 40%)

@mixin center-tabs
  margin: 0 auto
  max-width: 600px

  .MuiTabs-flexContainer
    justify-content: center

  > .MuiTabs-root
    margin-top: 4em

  [role=tabpanel]
    background: rgba(255, 255, 255, 0.5)
    border-radius: 0 0 .5em .5em
    padding: .5em 0.5em 0.5em

    .card-list > li:last-child
      margin-bottom: 0

@mixin sprite-shadow
  filter: drop-shadow(2px 2px 2px rgba(100, 100, 100, .4))