ujh/fountainpencompanion

@use "~bootstrap/scss/bootstrap" as b;

.fpc-currently-inked-table {
  td {
    vertical-align: middle;
  }
  .inked_on {
    white-space: nowrap;
  }
  .links {
    text-align: left;
    .btn {
      margin-bottom: 7px;
    }
    nav {
      font-size: 24px;
      .page {
        margin-left: 5px;
        margin-right: 5px;
      }
    }
  }
}

#currently-inked-archive {
  @media (min-width: 992px) {
    .swabs {
      display: none;
    }
  }
  @media (max-width: 991px) {
    .table {
      display: none;
    }
  }
  .export {
    text-align: right;
    margin-bottom: 10px;

    @include b.media-breakpoint-up("sm") {
      float: right;
    }
  }

  .swabs {
    .stats {
      text-align: center;
    }
    .links {
      text-align: center;
      .btn {
        width: 100%;
        margin-bottom: 7px;
      }
      nav {
        font-size: 24px;
        .page {
          margin-left: 5px;
          margin-right: 5px;
        }
      }
    }
    .entry {
      border: 1px solid #ccc;
      border-radius: 10px;
      padding: 5px;
      margin-top: 15px;
      margin-bottom: 15px;
      .swab {
        margin-inline: auto;
        height: 180px;
        width: 180px;
        position: relative;

        &::before {
          content: " ";
          position: absolute;
          top: 1px;
          left: 1px;
          right: 1px;
          bottom: 1px;
          background-color: var(--swab-color);
          -webkit-mask: url(../images/swab.svg);
          mask: url(../images/swab.svg);
          -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
        }
      }
      .actions {
        margin-bottom: 3px;
        text-align: right;
        .btn {
          margin: 2px;
        }
        i {
          font-size: 24px;
          margin: 0;
        }
      }
    }
  }
}

form.edit_currently_inked,
form.new_currently_inked {
  .row {
    box-shadow: none !important;
  }
  input[type="submit"] {
    margin-right: 15px;
  }

  $_form-field-height: 38px;

  .select2-selection,
  .select2-container--default
    .select2-selection--single
    .select2-selection__arrow {
    height: $_form-field-height;
  }

  .select2-container--default
    .select2-selection--single
    .select2-selection__rendered {
    line-height: $_form-field-height;
  }
}