/* The status card container - set the width and height to whatever you want. We have added the border property to demonstrate that the status itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.status-card {
    display: grid;
    grid-template-rows: 48px auto;

    margin: 8px;

    width: 300px;
    min-height: fit-content;

    position: relative;

    transition: all .25s;

    &:hover {
        transform: scale(1.05, 1.05) rotate(2deg);
    }
}

  
  /* Style the front side (fallback if image is missing) */
  .status-card-header {
    display: grid;
    grid-template-columns: min-content auto;
    grid-template-rows: auto;

    background-image: linear-gradient(
        -45deg,
        var(--theme-alert-dark) 23%,
        var(--theme-alert-darker) 23%,
        var(--theme-alert-darker) 46%,
        var(--theme-alert-dark) 46%,
        var(--theme-alert-dark) 69%,
        var(--theme-alert-darker) 69%,
        var(--theme-alert-darker) 100%
    );

    color: var(--theme-white);

    & .status-icon {
      width: 32px;
      height: 32px;

      background-color: var(--theme-alert-base);
      border-radius: 8px;

      margin: 4px; 
    }
    
    border: 2px solid var(--theme-white);

  }
  


  .status-name {
    font-family: "BW";
    font-size: 32px;

    margin-left: 8px;
    margin-top: auto;
    margin-bottom: auto;
  }

  .status-standard {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 32px;
    height: 32px;

    background-color: var(--theme-gray-dark);
    border-radius: 8px;
  }

  /* Style the back side */
  .status-card-body {
    background-color: var(--theme-alert-darker);

    border: 2px solid var(--theme-alert-dark);
    border-top: 0px none var(--theme-white);

    padding: 8px;

    color: var(--theme-white);
  }

  .status-card {
    &.positive {
        & .status-card-header {
            background-image: linear-gradient(
              -45deg,
              var(--theme-accent-2-dark) 23%,
              var(--theme-primary-1-dark) 23%,
              var(--theme-primary-1-dark) 46%,
              var(--theme-accent-2-dark) 46%,
              var(--theme-accent-2-dark) 69%,
              var(--theme-primary-1-dark) 69%,
              var(--theme-primary-1-dark) 100%
          );

          & .status-icon {
            background-color: var(--theme-accent-2-base);
          }
        }

        & .status-card-body {
          border: 2px solid var(--theme-accent-2-light);
          background-color: var(--theme-accent-2-dark);

          border-top: 0px none var(--theme-white);
        }
    }
  }