/*!
  *  Copyright (C) 2023 Robert Bosch GmbH Copyright (C) 2023 Robert Bosch Manufacturing Solutions GmbH, Germany. All rights reserved.
 */

@import '@bci-web-core/common-styles/sass/bci/bci-variables';

$picker-width: 292px;
$generic-padding: 10px;

.duration-picker-container {
  position: relative;
  width: $picker-width;

  mat-form-field.mat-mdc-form-field {
    width: $picker-width;
  }

  .suffix-btn:focus {
    background-color: rgb(0 0 0 / 25%);
  }

  .toggle-panel {
    position: absolute;
    background-color: $boschWhite;
    box-shadow: 0 0 $grid-size rgb(0 0 0 / 25%);
    z-index: 2;
    width: $picker-width;
    transform: translateY(-21px);

    .durations-container {
      justify-content: space-between;
      padding: $generic-padding;
    }

    .buttons-container {
      justify-content: flex-end;
      border-top: 1px solid $boschBlack;
      padding: $generic-padding;
    }

    span {
      margin: 0 calc($grid-size / 2);
    }

    p {
      margin: 0;
      font-size: 12px;
      font-weight: 700;
      line-height: 18px;
      letter-spacing: 0em;
      text-align: left;
      padding: $generic-padding $generic-padding 0 $generic-padding;
    }
  }
}

.center-elements {
  display: flex;
  align-items: center;
}

:host ::ng-deep {
  mat-form-field.mat-mdc-form-field.mat-form-field-appearance.mat-mdc-form-field-label-always-float.mat-mdc-form-field-label,
  mat-form-field.mat-mdc-form-field.mat-mdc-form-field-label-always-float .mat-mdc-form-field-label {
    background-color: transparent;
  }

  .mat-mdc-form-field-flex {
    &:hover {
      label {
        background-color: transparent !important;
      }
    }
  }
}
