// OrangeHRM is a comprehensive Human Resource Management (HRM) System that captures
// all the essential functionalities required for any enterprise.
// Copyright (C) 2006 OrangeHRM Inc., http://www.orangehrm.com
//
// OrangeHRM is free software: you can redistribute it and/or modify it under the terms of
// the GNU General Public License as published by the Free Software Foundation, either
// version 3 of the License, or (at your option) any later version.
//
// OrangeHRM is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY;
// without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
// See the GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License along with OrangeHRM.
// If not, see <https://www.gnu.org/licenses/>.


.orangehrm-employee-container {
  display: flex;
  @include oxd-respond-to('xs') {
    flex-direction: column;
  }
  @include oxd-respond-to('md') {
    flex-direction: row;
  }
  & .orangehrm-employee-image {
    flex: 1 1 25%;
    padding: 1rem;
    text-align: center;
  }
  & .orangehrm-employee-form {
    flex: 1 1 75%;
  }
}

.user-form-header {
  display: flex;
  padding: 1rem 0;
  &-text {
    font-size: 0.8rem;
    margin-right: 1rem;
  }
}

::v-deep(.--status-grouped-field) {
  display: flex;
}

::v-deep(.--gender-grouped-field) {
  display: flex;
}

.orangehrm-employee-list {
  ::v-deep(.card-header-slot) {
    border-bottom: $oxd-input-control-border--active;
    margin-bottom: 5px;
  }
  ::v-deep(.card-header-slot .oxd-table-card-cell) {
    display: flex;
  }
  ::v-deep(.card-header-slot .header) {
    margin-right: 5px;
    font-size: 1rem;
  }
  ::v-deep(.card-header-slot-content.--left) {
    display: flex;
    align-items: center;
  }
  ::v-deep(.card-body-slot) {
    display: unset;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0.2rem;
  }
}

.orangehrm-employee-picture {
  text-align: center;
  margin: 0 auto;
  margin-bottom: 8rem;
  ::v-deep(.oxd-file-div) {
    width: 12rem !important;
    height: 12rem !important;
  }
  ::v-deep(.employee-image) {
    height: 12rem;
  }
}

::v-deep(.--termination-button) {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.orangehrm-terminate-date {
  cursor: pointer;
  color: $oxd-primary-one-color;
  text-decoration: underline;
  font-size: 0.75rem;
  font-weight: 800;
}
