// Imports Project Config File with wariables/mixins/functions
@import "../../assets/scss/config";

%options {
  .es-card-add__options {
    display: flex;
    flex-direction: column;
    align-items: center;
    li {
      margin: 5px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      border-radius: 25px;
      border: 1px solid rgba(0, 0, 0, 0.05);
      outline: none;
      &:hover {
        border: 1px solid es-color(green);
      }
      .es-card-add-icons {
        border: 1px solid rgba(192, 192, 192, 0.5);
        border-radius: 50%;
        margin: 3px;
        background-color: rgba(255, 255, 255, 0.4);
        background-size: 26px;
        outline: none;
        padding: 6px;
        display: flex;
        i {
          font-size: 16px;
          color: es-color(green);
        }
      }
      .es-card-add-text {
        text-align: left;
        width: 68px;
        padding-left: 3px;
        color: es-color(black);
        font-family: "BrandonLight";
        font-weight: bold;
        font-size: 13px;
      }
    }
  }
}

.es-card-wrapper {
  .es-card {
    &.es-card-add {
      cursor: pointer;
      display: flex;
      position: relative;
      min-height: 380px;
      border: dashed 2px es-color(black, 4);
      background: transparent;
      align-items: center;
      justify-content: center;
      outline: none;
      i {
        font-size: 40px;
        color: es-color(black, 4);
      }
      @extend %options;
    }
  }
}

// Style for list view
.es-list-view {
  .es-card {
    &.es-card-add {
      display: flex;
      position: relative;
      height: 72px;
      border: dashed 1px es-color(black, 4);
      background: transparent;
      align-items: center;
      justify-content: center;
      outline: none;
      margin-bottom: 32px;

      i {
        font-size: 30px;
        color: es-color(black, 4);
      }

      @extend %options;

      .es-card-add__options {
        display: flex;
        flex-direction: row;
        width: 600px;
        align-items: center;
        justify-content: center;
      }
    }
  }
}