@import "variables";
@import "mixins/lines";

:host {
  border: solid 0;
  width: 352px;
  background: unset;

  .card-container .first-tab-container {
    background-color: $blue-400;

    &:hover {
      background-color: $blue-400;
      .line {
        border-top-color: $blue-550;
      }
    }

    &.first-tab-hovered {
      background-color: $blue-400;
    }
  }

  .folder-tab {
    height: 20px;
    line-height: 20px;
    display: flex;

    .first-tab {
      flex: 0 0 64px;
      width: 60px;
      height: 20px;
      line-height: 0;
    }

    .middle-tab {
      font: normal normal 500 12px/20px 'Heebo', sans-serif;

      white-space: nowrap;
      color: $blue-300;

      &.second-tab-active {
        color: $blue-200
      }

      background-color: $blue-600;

      &.tab-hovered:not(.show-second-tab) {
        background-color: $blue-400;
        color: $blue-200;
      }

      padding-right: 6px;
    }

    .second-tab {
      flex: 0 0 28px;
      width: 28px;
      line-height: 0;
    }

  }

  overflow: hidden;


  .card-container {
    position: relative;
    transition: $transition-fast;
    height: 226px;
    width: 100%;
    background-color: $blue-500;
    border-radius: 6px;
    overflow: hidden;

    &.is-folder {
      border-top-left-radius: 0;
    }


    .tab-container {
      width: 100%;
      height: 100%;
      position: absolute;
      border-radius: 6px;

      &.is-folder {
        border-top-left-radius: 0;
      }
    }

    .first-tab-container {
      padding-top: 10px;
      background-color: $card-bg;
      display: flex;
      flex-direction: column;

      footer {
        margin-top: auto;
        position: relative;
        background-color: $card-footer-bg;
      }

      header {
        padding: 0 16px;
      }

      header.empty {
        padding: 0;
      }

      .line {
        border-top: solid 1px $blue-600;
        margin: 0 16px;
        width: auto;
      }

      .card-body {
        padding: 6px 16px;
        display: flex;
        align-items: center;
      }

      .ribbon {
        transform: rotate(-45deg);
        border: 25px solid transparent;
        border-top: 25px solid;
        border-top-color: $neon-yellow;
        position: absolute;
        bottom: -4px;
        right: -34px;
        padding: 0 10px;
        width: 110px;
        color: #68777C;
        font-size: 10px;
      }

      .ribbon .txt {
        position: absolute;
        top: -20px;
        left: -3px;
      }
    }

    .second-tab-container {
      background: $blue-600;
    }
  }


}
