@import "_vars.scss";

.card
{
  cursor: pointer;
  width: 200px;
  height: 300px;
  
  background-color: $button-background-color;
  border: $button-border;
  backdrop-filter: blur(1px);
  
  > .card-icon
  {
    width: 50%;
    height: 50%;
    margin: auto;
    transform: translateY(-20%);

    transition: all 0.3s ease-out;
  }
    
  &:hover
  {
    sound-in: "garryware.menu.hover";

    background-color: $button-background-color-hover;
    border: $button-border-hover;
    
    > .card-icon
    {
      width: 60%;
      height: 60%;
    }
  }
  &:active
  {
    top: 3px;
  }
}

.card-text
{
  position: absolute;
  width: 100%;
  bottom: 10px;
  flex-direction: column;

  font-size: 26px;
  font-family: Poppins;
  font-weight: bold;
  flex-shrink: 0;
  color: white;
  text-align: center;

  > Label
  {
    margin-left: auto;
    margin-right: auto;
    width: 90%;
  }

  > .desc
  {
    font-size: 18px;
    font-weight: normal;
  }
}

.disabled
{
  background-color: rgba(darkred, 0.7);
  
  &:hover
  {
    border: 1px solid crimson;
    background-color: rgba(darkred, 0.7);
  }
}